Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So erreichen Sie eine vertikale Textanordnung in CSS

王林
Freigeben: 2020-11-30 14:41:09
Original
7336 Leute haben es durchsucht

So erreichen Sie eine vertikale Anordnung von Text in CSS: Sie können dazu das Attribut writing-mode verwenden, z. B. [writing-mode: Vertical-rl;]. Das Attribut „writing-mode“ definiert, wie Text horizontal oder vertikal angeordnet wird.

So erreichen Sie eine vertikale Textanordnung in CSS

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3, dieser Artikel gilt für alle Computermarken.

Die Eigenschaft writing-mode definiert, wie Text horizontal oder vertikal angeordnet wird.

(Teilen von Lernvideos: Java-Kurs)

horizontal-tb: horizontale Schreibmethode von oben nach unten. Das heißt, links-rechts-oben-unten

vertikal-rl: vertikal von rechts nach links geschrieben. Das heißt, oben-unten-rechts-links

vertikal-lr: Der Inhalt ist in vertikaler Richtung von oben nach unten und in horizontaler Richtung von links nach rechts

seitlich-rl: Der Inhalt ist vertikal von oben angeordnet nach unten

sideways-lr: Inhalt vertikal von unten nach oben angeordnet

Codebeispiel:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS文字垂直排列</title>
        <style type="text/css">
            div{
                border: 1px solid lightblue;
                padding: 5px;
            }
            .vertical-text{
                -webkit-writing-mode: vertical-rl;
                writing-mode: vertical-rl;
            }
        </style>
    </head>
    <body>
        <div class="vertical-text">
            1. 文字垂直排列 <br />
            2. 文字垂直排列
        </div>
    </body>
</html>
Nach dem Login kopieren

Laufergebnisse:

So erreichen Sie eine vertikale Textanordnung in CSS

Verwandte Empfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine vertikale Textanordnung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage