So realisieren Sie die vertikale Anordnung von Text mit CSS3

In einem aktuellen Projekt wollte ich Text vertikal ausrichten und habe dazu die CSS-Eigenschaft „writing-mode“ verwendet.

Der Schreibmodus war ursprünglich eine vom Internet Explorer unterstützte Eigenschaft. Später wurde diese neue Eigenschaft in CSS3 hinzugefügt, sodass die Syntax im Internet Explorer und anderen Browsern unterschiedlich ist.

1.0 CSS3-Standard

writing-mode:horizontal-tb; //Standard: horizontale Richtung, von oben nach unten writing-mode:vertical-rl; //Vertikale Richtung, von rechts nach links writing-mode:vertical-lr; //Vertikale Richtung, von links nach rechts

Demo

<!DOCTYPE html>
<html>
    <Kopf>
        <meta charset="utf-8">
        <title>Vertikale Ausrichtung des CSS-Texts</title>
        <style type="text/css">
            div{
                Rand: 1px durchgehend hellblau;
                Polsterung: 5px;
            }
            .vertikaler-text{
                -webkit-Schreibmodus: vertikal-rl;
                Schreibmodus: vertikal-rl;
            }
        </Stil>
    </Kopf>
    <Text>
        <div Klasse="vertikaler-text">
            1. Text wird vertikal angeordnet<br />
            2. Text wird vertikal angeordnet</div>
    </body>
</html>

2.0 Internet Explorer

Aus historischen Gründen ist der Wert dieser Eigenschaft im Internet Explorer besonders kompliziert:

Einzelheiten entnehmen Sie bitte der offiziellen Dokumentation:

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode/

3.0 Einige Anwendungen

3.1 Vertikale Zentrierung

Durch die Verwendung dieser Eigenschaft können wir sie mit text-align:center kombinieren, um eine vertikale Zentrierung zu erreichen, oder margin: auto verwenden.

<!DOCTYPE html>
<html>
    <Kopf>
        <meta charset="utf-8">
        <title>CSS3-Bild vertikal zentriert</title>
        <style type="text/css">
            div{
                Rand: 1px durchgehend hellblau;
                Polsterung: 5px;
                Höhe: 500px;
            }
            .vertical-img{
                -webkit-Schreibmodus: vertikal-rl;
                -ms-Schreibmodus: bt-rl;
                Schreibmodus: vertikal-rl;
                Textausrichtung: zentriert;
            }
        </Stil>
    </Kopf>
    <Text>
        <div Klasse="vertical-img">
             <img src="1.jpg"/>
        </div>
    </body>
</html>

3.2 Textsenkungseffekt

Wir können den Schreibmodus des Textes festlegen und ihn dann mit dem Texteinzug kombinieren, um den sinkenden Effekt zu erzielen, wenn auf den Text geklickt wird.

<!DOCTYPE html>
<html>
    <Kopf>
        <meta charset="utf-8">
        <title>Textsenkungseffekt</title>
        <style type="text/css">
            .btn{
                Breite: 50px;
                Höhe: 50px;
                Zeilenhöhe: 50px;
                Farbe: weiß;
                Textausrichtung: zentriert;
                Schriftgröße: 16px;;
                Anzeige: Inline-Block;
                Randradius: 50 %;
                Hintergrund: grau;
                Cursor: Zeiger;
            }
            .btn:aktiv{
                Texteinzug: 2px;
            }
            .vertikaler-text{
                 Schreibmodus: tb-rl;
                -webkit-Schreibmodus: vertikal-rl;      
                Schreibmodus: vertikal-rl;
                *Schreibmodus: tb-rl;
            }
        </Stil>
    </Kopf>
    <Text>
        <span>Klicken Sie hier, um einen roten Umschlag zu erhalten</span>
        <p class="vertical-text btn">Öffnen</p>
    </body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Anfänger lernen einige HTML-Tags (2)

>>: Detaillierte Diskussion mehrerer Methoden zur Deduplizierung von JavaScript-Arrays

Eine einfache Strategie zur ID-Generierung: Implementierung der Generierung einer global eindeutigen ID aus einer MySQL-Tabelle

Artikel

Einstellungen für den Ubuntu-Boot-Autostart-Dienst

So realisieren Sie die vertikale Anordnung von Text mit CSS3

Eine einfache Strategie zur ID-Generierung: Implementierung der Generierung einer global eindeutigen ID aus einer MySQL-Tabelle

Einstellungen für den Ubuntu-Boot-Autostart-Dienst

js, um eine einfache Produkt-Screening-Funktion zu erreichen

6 Tipps für Webdesign

Natives JS zum Erstellen einer Drag-Fotowand

Wie MLSQL Stack das Stream-Debugging vereinfacht

Beispiel für CSS3 zum Erzielen eines Div-Ein- und Ausschiebens von unten nach oben

Ein paar Dinge zu favicon.ico (am besten im Stammverzeichnis ablegen)

So erhalten Sie die Breite und Höhe des Bildes im WeChat-Applet

Zusammenfassung gängiger SQL-Anweisungen in MySQL

Artikel empfehlen

Wie InnoDB Transaktionsisolationsebenen geschickt implementiert

Führen Sie die Schritte zum Erstellen einer Laravel-Entwicklungsumgebung mit Docker aus

So konvertieren Sie Chinesisch in HTML in UTF-8

Tutorial-Analyse zur Installation und Nutzung des Linux-Leistungsüberwachungstools nmon

Zusammenfassung einiger praktischer kleiner Zaubertricks in der Vue-Praxis

Zusammenfassung der langsamen MySQL-Abfragevorgänge

Reiner CSS-Header, korrigierter Implementierungscode

Detailliertes Tutorial zur Installation verschiedener (zwei) Versionen der MySQL-Datenbank unter Windows

Installieren und Bereitstellen von Java8 und MySQL unter CentOS7

Verstehen Sie das CSS3-Rasterlayout in 10 Minuten

Detaillierte Erklärung und Beispiele zur Passwortverschlüsselung für Datenbankkonten

JavaScript-Canvas zum Erzielen eines Spiegelbildeffekts

Reines CSS für eine coole Ladeanimation

Detaillierte Erläuterung der sechs gängigen Einschränkungstypen in MySQL

Lösung für das Problem, dass der Z-Index in CSS3 nicht wirksam wird