Wie man Text mit CSS in Zeilen anzeigt-CSS-Tutorial-php.cn

Wie man Text mit CSS in Zeilen anzeigt

coldplay.xixi

Freigeben： 2023-01-03 09:29:20

Original

5951 Leute haben es durchsucht

So zeigen Sie Text in Zeilen in CSS an: 1. Verwenden Sie das Attribut [writing-mode], die Syntax ist [writing-mode:lr-tb oder writing-mode:tb-rl]; 2. Die Breite des Textes Objekt kann nur eingestellt werden Der Breitenabstand des nächsten Textes.

Wie man Text mit CSS in Zeilen anzeigt

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.

Css-Methode zum Anzeigen von Text in Zeilen:

Methode 1: Verwenden Sie das Schreibmodus-Attribut

Syntax:

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

Nach dem Login kopieren

Parameter: lr-tb: von links nach rechts, von oben nach unten; tb-rl: von oben nach unten, von rechts nach links.

    <!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>

Nach dem Login kopieren

Diese Methode ist schlecht kompatibel und wird nur im IE-Browser unterstützt. Daher wird sie hier nicht vorgestellt. Wenn Sie mehr wissen möchten, können Sie sich das CSS-Online-Handbuch ansehen.

Methode 2 zur vertikalen Anzeige von CSS-Text:

Durch Festlegen der Breite des Textobjekts kann nur der Breitenabstand des nächsten Texts festgelegt werden, sodass der Text nicht in zwei Zeichen in einer Zeile passen kann, sodass der Text automatisch angezeigt wird Wraps, die einen vertikalen Schriftsatz erfordern.

    <!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>

Nach dem Login kopieren

Hinweis: word-wrap:break-word;/*Sie müssen diesen Satz auf Englisch hinzufügen, um die Zeile automatisch umzubrechen*/

Empfohlene Tutorials: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWie man Text mit CSS in Zeilen anzeigt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!