css文字怎么豎排顯示

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

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的犍為網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

使用writing-mode屬性

語法：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ú)向隅。

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

</body>

</html>

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

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

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

<!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í)候需要加上這句，自動換行*/

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

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

網(wǎng)站標(biāo)題：css文字怎么豎排顯示
分享地址：http://www.rwnh.cn/article0/pdepoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站改版、微信小程序、網(wǎng)站維護(hù)、網(wǎng)站排名

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

css文字怎么豎排顯示