溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css中怎么設(shè)置豎排文字

發(fā)布時間：2021-05-27 11:29:21 來源：億速云 閱讀：1748 作者：小新 欄目：web開發(fā)

這篇文章主要介紹css中怎么設(shè)置豎排文字，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

css設(shè)置豎排文字的方法：1、通過“word-wrap: break-word;”等屬性實現(xiàn)單個豎排文字；2、通過“writing-mode: tb-lr”等屬性實現(xiàn)多行豎排文字；3、通過“rotate(90deg);”實現(xiàn)整體豎向排版。

本文操作環(huán)境：Windows7系統(tǒng)、HTML5&&CSS3版，DELL G3電腦

CSS幾種簡單方法實現(xiàn)文字豎向排版

下面介紹幾種使用Css實現(xiàn)文字豎向排版的方法：

1.一個句子的豎向排列

如圖：

css中怎么設(shè)置豎排文字 css中怎么設(shè)置豎排文字

<!DOCTYPE html>  <html>  <head>  
    <title>test</title>  
    <meta charset="UTF-8">  </head>  <style>  .one {  
    width: 20px;  
    margin: 0 auto;  
    line-height: 24px;  
    font-size: 20px;}.two {  
    width: 15px;  
    margin: 0 auto;  
    line-height: 24px;  
    font-size: 20px;  
    word-wrap: break-word;/*英文的時候需要加上這句，自動換行*/  }  </style>  <body>  
    <p class="one">我是豎列排版</p>  
    <p class="two">I AM ENGLISH</p>  </body>  </html>

2.多個句子豎向排列（如古詩）

如圖：

css中怎么設(shè)置豎排文字

<!DOCTYPE html>  <html>  <head>  
    <title>test</title>  
    <meta charset="UTF-8">  </head>  <style>  .one {  
    margin: 0 auto;  
    height: 140px;  
    writing-mode: vertical-lr;/*從左向右 從右向左是 writing-mode: vertical-rl;*/  
    writing-mode: tb-lr;/*IE瀏覽器的從左向右 從右向左是 writing-mode: tb-rl；*/  }  </style>  <body>  
    <p class="one">欲話毗陵君反袂，欲言夏口我沾衣。誰知臨老相逢日，悲嘆聲多語笑稀。</p>  
    <p class="one">I AM ENGLISH</p></body>  </html>

3.字體橫行，整體豎向排版

如圖：

css中怎么設(shè)置豎排文字

<!DOCTYPE html><html><head>
    <title>test</title>
    <meta charset="UTF-8"></head><style>.one {
    margin: 150px auto;
    width: 200px;
    font-size: 20px; 
    line-height: 24px;
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);     /* IE 9 */
    -moz-transform:rotate(90deg);     /* Firefox */
    -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
    -o-transform:rotate(90deg);     /* Opera */}</style><body>
    <p class="one">欲話毗陵君反袂</p>
    <p class="one">ENGLISH</p></body></html>

css的基本語法是什么

css的基本語法是：1、css規(guī)則由選擇器和一條或多條聲明兩個部分構(gòu)成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個屬性和一個值組成；4、屬性和屬性值被冒號分隔開。

以上是“css中怎么設(shè)置豎排文字”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手