css實(shí)現(xiàn)文字豎排的方式(小結(jié))
發(fā)布時(shí)間：2019-07-01 15:16:18 作者：零度螢火 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了css實(shí)現(xiàn)文字豎排的方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
html中文字的默認(rèn)排列是橫向排列的，但一些特殊情況下是需要文字豎向排列的。
單行文字豎向排列
.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;/*英文的時(shí)候需要加上這句，自動(dòng)換行*/
word-break:break-all;
}
說明：實(shí)現(xiàn)文字單行豎向排列，只需要把寬度設(shè)置為剛好容納一個(gè)字體的寬度即可。
多行文字豎向排列
.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。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用CSS實(shí)現(xiàn)文字的豎排的簡(jiǎn)單方法
這篇文章主要介紹了使用CSS實(shí)現(xiàn)文字的豎排的簡(jiǎn)單方法,介紹兩個(gè)相關(guān)屬性的同時(shí)示例中則使用普通的排版參數(shù)設(shè)置來實(shí)現(xiàn),需要的朋友可以參考下2015-08-05- 在word、excel中可以輕松的實(shí)現(xiàn)文字豎排的形式，但是在html頁(yè)面中呢？當(dāng)然也可以實(shí)現(xiàn)，下面有個(gè)不錯(cuò)的示例，大家可以參考學(xué)習(xí)下2013-10-16