卡卡網(wǎng)

網(wǎng)頁(yè)或UI設(shè)計(jì)時(shí)，有時(shí)需要把文字豎向排布，這個(gè)要怎么實(shí)現(xiàn)呢？其實(shí)很簡(jiǎn)單，CSS很少的代碼就能實(shí)現(xiàn)。

demodownload

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>

execcodegetcode

代碼解釋

1、通過CSS writing-mode的屬性vertical-rl設(shè)置書寫方向。

2、writing-mode的屬性有以下這些

trying >>

在CSS中，可以寫成"\000A"，或"\A",通過偽類加入標(biāo)簽，即可實(shí)現(xiàn)各個(gè)標(biāo)簽的換行，如上示例中為每一句詩(shī)的span元素添加換行。

標(biāo)簽: css  css3  豎向文字