首頁 >web前端 >css教學 >css如何讓文字成排顯示

css如何讓文字成排顯示

coldplay.xixi原創: 2021-03-11 16:35:155941瀏覽

css讓文字成排顯示的方法：1、使用【writing-mode】屬性，語法為【writing-mode:lr-tb或writing-mode:tb-rl】；2、對文字對象寬度設定只能排下一個文字的寬度距離。

css如何讓文字成排顯示

本教學操作環境：windows7系統、css3版，DELL G3電腦。

css讓文字成排顯示的方法：

# 方法一：使用writing-mode屬性

語法：

writing-mode:lr-tb或writing-mode:tb-rl

參數：lr-tb：由左向右，由上往下；tb-rl：從上往下，從右到左。

    <!DOCTYPEhtml>
    <html>
    <head>
    <title>test</title>
    <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">十轮霜影转庭梧，此夕羁人独向隅。
    未必素娥无怅恨，玉蟾清冷桂花孤。</div>
    </body>
    </html>

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

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

設定文字物件寬度只能排下一個文字的寬度距離，讓文字一行排不下兩個文字使其文字自動換行，就形成了豎立排版需求。

    <!DOCTYPEhtml>
    <html>
    <head>
    <title>test</title>
    <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;/*英文的時候需要加上這句，自動換行*/

相關教學推薦：CSS視頻教程

以上是css如何讓文字成排顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css css3 break 对象 word

陳述：

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

上一篇：jq如何動態加入動態css樣式下一篇：jq如何動態加入動態css樣式

看更多