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

Artikel empfehlen

Detaillierte Erläuterung der Architektur und Funktionen von InnoDB (Zusammenfassung der Lesehinweise zur InnoDB-Speicher-Engine)

Hintergrund-Threads •Hauptthread Der Kern-Hinterg...

So realisieren Sie die vertikale Anordnung von Text mit CSS3

Kreatives „Über uns“-Webseitendesign

Zusammenfassung der allgemeinen Quellkonfiguration von Spiegelbildern für Linux-Distributionen

Tutorial zur Bereitstellung und Installation von MySQL 8.0.18 unter Windows 7

So entfernen Sie Inline-Stile, die durch das Stilattribut (element.style) definiert sind

Beispiel für die Verwendung von JSX zum Erstellen einer Komponentenparserentwicklung

vue + springboot realisiert den Login-Bestätigungscode

Beispielcode zum Konvertieren von HTML-Tabellendaten in das JSON-Format

Lösen Sie das domänenübergreifende Problem von Get- und Post-Anfragen von vue $http

Detaillierte Erläuterung zur Verwendung von Amoeba zum Implementieren der Lese-/Schreibtrennung einer MySQL-Datenbank

Detailliertes Tutorial zum Herunterladen und Installieren von VMware Workstation

Artikel empfehlen

Detaillierte Erläuterung der Architektur und Funktionen von InnoDB (Zusammenfassung der Lesehinweise zur InnoDB-Speicher-Engine)

Vue integriert Tencent Map zur Implementierung der API (mit DEMO)

Docker stellt Laravel-Anwendung bereit, um Warteschlangen- und Aufgabenplanung zu realisieren

VMware Workstation Pro installiert das Win10-Betriebssystem in Reinform

So zeigen Sie Anwendungsprotokolle von Docker-Containern an

Detaillierte Erklärung, wie Sie mit CSS einige Pixel Leerraum unter einem Bild freigeben können

Detailliertes Tutorial zum Bereitstellen einer benutzerdefinierten Apollo-Umgebung mit Docker-Compose

Detaillierte Erklärung des Befehlsmodus in der Javascript-Praxis

Linux nutzt duale Netzwerkkartenbindung und Schraubendreherschnittstelle

Vue implementiert Fuzzy-Abfrage-MySQL-Datenbankdaten

So kapseln Sie Abfragekomponenten basierend auf Element-UI Schritt für Schritt

Detaillierte Erläuterung des Bereitstellungsprozesses des SEATA-Transaktionsdienstes Docker

Lösung für Fremdschlüsselfehler bei der MySQL-Tabellenerstellung

Problem beim doppelten Laden, wenn die Seite img src enthält

Zusammenfassung verschiedener gängiger Abfragebeispiele für Join-Tabellen in MySQL