css如何讓文字成排顯示-css教學-PHP中文網

首頁

web前端

css教學

css如何讓文字成排顯示

coldplay.xixi

Mar 11, 2021 pm 04:35 PM

css

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