CSSでテキストを行単位で表示する方法-CSSチュートリアル-php.cn

CSSでテキストを行単位で表示する方法

coldplay.xixi

リリース： 2023-01-03 09:29:20

オリジナル

5947 人が閲覧しました

テキストを行に表示する Css メソッド: 1. [writing-mode] 属性を使用します、構文は [writing-mode:lr-tb または writing-mode:tb-rl] です; 2. テキストの場合オブジェクトの幅設定は、次のテキストの幅の距離のみを調整できます。

CSSでテキストを行単位で表示する方法

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、DELL G3 コンピューター。

テキストを行に表示する Css メソッド:

方法 1: 書き込みモード属性を使用する

構文:

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 テキストを縦方向に表示する方法 2:

テキストオブジェクトの幅を設定して、次のテキストのみを配置し、2 つのテキストが配置できないようにします。テキストを自動的に折り返すと、縦組版が必要になります。

    <!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;/*行を自動的に折り返すには、この文を英語で追加する必要があります*/