|
|
|
|
|
網(wǎng)頁或UI設(shè)計時,有時需要把文字豎向排布,這個要怎么實現(xiàn)呢?其實很簡單,CSS很少的代碼就能實現(xiàn)。
CSS代碼
.tbl{
font-size: 20px;
margin: 100px 100px;
line-height: 150%;
writing-mode: vertical-rl;
}
.tbl>span::after{
content: '\A';
white-space: pre;
}
HTML代碼
<div class="tbl">
<span>何日歸家洗客袍?</span>
<span>銀字笙調(diào),心字香燒。</span>
<span>流光容易把人拋,紅了櫻桃,綠了芭蕉。</span>
</div>
代碼解釋
1、通過CSS writing-mode
的屬性vertical-rl
設(shè)置書寫方向。
2、writing-mode
的屬性有以下這些
屬性 | 描述 |
---|---|
vertical-rl | 垂直的自右到左 |
vertical-lr | 垂直的自左到右 |
sideways-rl | 水平的自右到左 |
sideways-lr | 水平的自左到右 |
在CSS中,可以寫成"\000A",或"\A",通過偽類加入標(biāo)簽,即可實現(xiàn)各個標(biāo)簽的換行,如上示例中為每一句詩的span
元素添加換行。