首頁 >web前端 >css教學 >css中writing-mode文字顯示方向以及相容的寫法

css中writing-mode文字顯示方向以及相容的寫法

黄舟
黄舟原創
2017-06-20 09:46:546959瀏覽

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瀏覽器:

css中writing-mode文字顯示方向以及相容的寫法

IE瀏覽器

css中writing-mode文字顯示方向以及相容的寫法

writing-mode的屬性值有:horizo​​ntal-tb,vertical-lr,vertical-rl,對應的IE下的值為:lr-tb,tb-lr,tb-rl。

horizo​​ntal-tb是預設值。 writing-mode的屬性值以中劃線分割,可以記作XX-OO, horizo​​ntal-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>

效果如下:

css中writing-mode文字顯示方向以及相容的寫法

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

以上是css中writing-mode文字顯示方向以及相容的寫法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn