css文字怎么豎排顯示

發(fā)布時(shí)間：2022-01-21 11:11:20 來(lái)源：億速云閱讀：937 作者：iii 欄目：web開發(fā)

這篇文章主要介紹“css文字怎么豎排顯示”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“css文字怎么豎排顯示”文章能幫助大家解決問題。

css文字豎排顯示的方法一：

使用writing-mode屬性

語(yǔ)法：writing-mode:lr-tb或writing-mode:tb-rl

參數(shù)：lr-tb：從左向右，從上往下；tb-rl：從上往下，從右向左。

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

</head>

<style>

.one{

margin:0auto;

height:140px;

writing-mode:vertical-lr;/*從左向右從右向左是writing-mode:vertical-rl;*/

writing-mode:tb-lr;/*IE瀏覽器的從左向右從右向左是writing-mode:tb-rl；*/

}

</style>

<body>

<divclass="one">十輪霜影轉(zhuǎn)庭梧，此夕羈人獨(dú)向隅。

未必素娥無(wú)悵恨，玉蟾清冷桂花孤。</div>

</body>

</html>

這種方法兼容性不好，只有在IE瀏覽器中才能支持，所以并不推薦使用，這里就不過多介紹要想了解更多可以參考css在線手冊(cè)。

css文字豎排顯示的方法二：

對(duì)文字對(duì)象寬度設(shè)置只能排下一個(gè)文字的寬度距離，讓文字一行排不下兩個(gè)文字使其文字自動(dòng)換行，就形成了豎立排版需求。

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

</head>

<style>

.one{

width:52px;

margin:0auto;

line-height:56px;

font-size:50px;

}

</style>

<body>

<divclass="one">中秋月</div>

</body>

</html>

注意：word-wrap:break-word;/*英文的時(shí)候需要加上這句，自動(dòng)換行*/

說明：對(duì)文字DIV設(shè)置較小的寬度，以達(dá)到一排只能排下一個(gè)文字，這樣文字就自動(dòng)換行，實(shí)現(xiàn)垂直豎列排版。
css文字怎么豎排顯示

關(guān)于“css文字怎么豎排顯示”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

向AI問一下細(xì)節(jié)

css文字怎么豎排顯示

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽