css中關于writing-mode屬性文字書寫方向以及兼容寫法詳解（圖）

writing-mode介紹

css 的writing-mode據說是為了中文，日文等方塊文字設計的，用來修改文字的書寫方向，通過這個屬性可以實現文字從右向左的布局，或者從上向下的布局。

writing-mode使用

.wrtmod{
 margin:15px;
 padding:15px;
 border:1px solid #bababa;
 background:#f1f1f1;
 font-size:15px;
 writing-mode:vertical-rl;
 writing-mode: tb-rl;
}

效果如下：

chrome瀏覽器：

IE瀏覽器：

writing-mode的屬性值有：horizontal-tb,vertical-lr,vertical-rl,對應的IE下的值為：lr-tb,tb-lr,tb-rl。

horizontal-tb是默認值。writing-mode的屬性值用中劃線分割，可以記作XX-OO, horizontal-tb表示文字橫向排列，行上下排列，veritcal-rl表示文字上下排列，行從右向左排列。IE的lr-tb表示文字從左到有排列，行從上向下排列，tb-rl表示文字上下排列，行從優向左排列。lr是left,right的首字母縮寫，tb是top,bottom首字母的縮寫。IE下面還可以使用諸如bt-rl,lr-bt等屬性值，排列方式更加豐富。但是為了兼容性在writing-mode屬性中只能采用這三個排列方式。

從上面的截圖，我們可以看到writing-mode不只改變了文字的書寫方向，而且容器的布局方式也隨之改變了。chrome，FireFox瀏覽器下div呈現了inline的特性，

IE8瀏覽器整個div由橫向轉為縱向，擁有了高度自適應的特性。

writing-mode的用途一般也就是用在一些詩句的縱向顯示，或者一些復古效果的頁面上，但是要注意IE8與其他瀏覽器的不同，它沒有呈現inline的特性，所以我們要通過display:inline-block來實現IE下的效果。

.wrtmod{
 margin:15px;
 padding:15px;
 border:1px solid #bababa;
 background:#f1f1f1;
 font-size:15px;
 writing-mode:vertical-rl;
 writing-mode:tb-rl;
 text-align:center;
 line-height:32px;
 letter-spacing: 12px;
 display: inline-block;
 
}
.wrtmod:first-line{
 font-weight:bold;
 color:#0C58A7;
 font-size:18px;
}
 
<div class="wrtmod">
 靜夜思<br/>
 窗前明月光<br/>
 疑是地上霜<br/>
 舉頭望明月<br/>
 低頭思故鄉
</div>

writing-mode改變了書寫模式后，使用text-align:center就可以實現上下居中。上面效果使用了letter-spacing和::first-line偽類，再結合write-mode就實現了一首古詩的書寫效果。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com