Heim > Web-Frontend > CSS-Tutorial > Detaillierte Erläuterung der Schreibrichtung und der kompatiblen Schreibmethoden des Schreibmodus-Attributs in CSS (Bild)

Detaillierte Erläuterung der Schreibrichtung und der kompatiblen Schreibmethoden des Schreibmodus-Attributs in CSS (Bild)

黄舟
Freigeben: 2017-07-26 11:36:50
Original
2933 Leute haben es durchsucht

Einführung in den Schreibmodus

Der CSS-Schreibmodus soll für Blocktext wie Chinesisch und Japanisch konzipiert sein. Er wird verwendet, um die Schreibrichtung von Text zu ändern. Der Text kann von rechts nach links oder von oben nach unten verschoben werden.

Schreibmodus verwendet

.wrtmod{
    margin:15px;
    padding:15px;
    border:1px solid #bababa;
    background:#f1f1f1;
    font-size:15px;
    writing-mode:vertical-rl;
    writing-mode: tb-rl;
}
Nach dem Login kopieren

und der Effekt ist wie folgt:

Chrome-Browser:

Detaillierte Erläuterung der Schreibrichtung und der kompatiblen Schreibmethoden des Schreibmodus-Attributs in CSS (Bild)

IE-Browser:

Detaillierte Erläuterung der Schreibrichtung und der kompatiblen Schreibmethoden des Schreibmodus-Attributs in CSS (Bild)

Die Attributwerte des Schreibmodus sind: horizontal-tb, Vertical-lr, Vertical-rl, entsprechend denen unter IE Die Werte sind: lr-tb,tb-lr,tb-rl.

horizontal-tb ist die Standardeinstellung. Der Attributwert des Schreibmodus wird durch einen Bindestrich getrennt, der als XX-OO aufgezeichnet werden kann, was bedeutet, dass der Text horizontal angeordnet ist, und dass die Zeilen vertikal angeordnet sind nach oben und unten angeordnet, und die Linien sind von rechts nach links angeordnet. lr-tb im IE bedeutet, dass der Text von links nach oben und die Zeilen von oben nach unten angeordnet sind. tb-rl bedeutet, dass der Text von oben nach unten und die Zeilen von oben nach links angeordnet sind. lr ist die Abkürzung für links und rechts und tb ist die Abkürzung für oben und unten. Unter IE können Sie auch Attributwerte wie bt-rl und lr-bt verwenden, und die Anordnungsmethoden sind umfangreicher. Aus Kompatibilitätsgründen können jedoch nur diese drei Anordnungen im Schreibmodus-Attribut verwendet werden.

Auf dem Screenshot oben können wir sehen, dass der Schreibmodus nicht nur die Schreibrichtung des Textes, sondern auch das Layout des Containers ändert. Das Div in Chrome- und Firefox-Browsern verfügt über die Inline-Funktion

Im IE8-Browser ändert sich das gesamte Div von horizontal in vertikal und verfügt über eine hochgradig adaptive Funktion.

Der Zweck des Schreibmodus besteht im Allgemeinen darin, einige Gedichte vertikal oder auf einigen Retro-Effekt-Seiten anzuzeigen. Es ist jedoch zu beachten, dass IE8 nicht über diese Funktion verfügt Inline-Funktion, also erreichen wir den Effekt unter IE durch display:inline-block.

.wrtmod{
    margin:15px;
    padding:15px;
    border:1px solid #bababa;
    background:#f1f1f1;
    font-size:15px;
    writing-mode:vertical-rl;
    writing-mode:tb-rl;
    text-align:center;
    line-height:32px;
    letter-spacing: 12px;
    display: inline-block;
 
}
.wrtmod:first-line{
    font-weight:bold;
    color:#0C58A7;
    font-size:18px;
}
 
<div class="wrtmod">
    静夜思<br/>
    窗前明月光<br/>
    疑是地上霜<br/>
    举头望明月<br/>
    低头思故乡
</div>
Nach dem Login kopieren

writing-mode Nachdem Sie den Schreibmodus geändert haben, verwenden Sie text-align:center, um eine Zentrierung oben und unten zu erreichen. Der obige Effekt verwendet Buchstabenabstände und Pseudoklassen der ersten Zeile in Kombination mit dem Schreibmodus, um den Schreibeffekt eines alten Gedichts zu erzielen.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schreibrichtung und der kompatiblen Schreibmethoden des Schreibmodus-Attributs in CSS (Bild). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
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