css實現(xiàn)文字豎排的方式(小結(jié))
發(fā)布時間：2019-07-01 15:16:18 作者：零度螢火 
我要評論
我要評論這篇文章主要介紹了css實現(xiàn)文字豎排的方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
html中文字的默認排列是橫向排列的，但一些特殊情況下是需要文字豎向排列的。
單行文字豎向排列
.onecn{
width: 20px;
margin: 0 auto;
line-height: 24px;
}
.oneen{
width: 15px;
margin: 0 auto;
line-height: 24px;
font-size: 20px;
word-wrap: break-word;/*英文的時候需要加上這句，自動換行*/
word-break:break-all;
}
說明：實現(xiàn)文字單行豎向排列，只需要把寬度設(shè)置為剛好容納一個字體的寬度即可。
多行文字豎向排列
.two{
margin: 0 auto;
height: 140px;
writing-mode: vertical-lr;/*從左向右 從右向左是 writing-mode: vertical-rl;*/
writing-mode: tb-lr;/*IE瀏覽器的從左向右 從右向左是 writing-mode: tb-rl；*/
}
說明：高度很重要，如果需要控制文字的間距和行距，可以添加屬性letter-spacing和line-height。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了使用CSS實現(xiàn)文字的豎排的簡單方法,介紹兩個相關(guān)屬性的同時示例中則使用普通的排版參數(shù)設(shè)置來實現(xiàn),需要的朋友可以參考下2015-08-05
- 在word、excel中可以輕松的實現(xiàn)文字豎排的形式，但是在html頁面中呢？當然也可以實現(xiàn)，下面有個不錯的示例，大家可以參考學習下2013-10-16