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: -ms-Schreibmodus: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | lr | rl | tb 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
Nginx verbessert die Zugriffsgeschwindigkeit basierend auf der GZIP-Komprimierung
1. Warum verwendet Nginx gzip? 1. Die Rolle der K...
Zusammenfassung der allgemeinen APIs und erweiterten APIs von Vue
Inhaltsverzeichnis nächstesTick Mixins $forceUpda...
Einführung in die schnelle Docker-Bereitstellung eines SpringBoot-Projekts
1. Docker installieren Öffnen Sie zunächst die Li...
Zwei Möglichkeiten, mit IIS X-Forwarded-For Header (XFF) aufzurufen, um die tatsächliche IP des Besuchers aufzuzeichnen
Problem: Die über IIS veröffentlichte Website wir...
Blog-Design Webdesign-Debüt
Die erste Webseite, die ich entworfen habe, sieht...
Einführung in die Verwendung des MySQL Performance Stress Benchmark Tools Sysbench
Inhaltsverzeichnis 1. Einführung in Sysbench #Pro...
CSS entfernt die Hintergrundfarbe von Elementen, die beim Anklicken auf dem mobilen Endgerät generiert werden (empfohlen)
Füge im CSS-Style des Elements, welches die Hinte...
Beispiel zur Erhöhung des Swap-Speichers im CentOS7-System
Vorwort Swap ist eine spezielle Datei (oder Parti...
Detaillierte Erklärung des strikten Modus in JavaScript
Inhaltsverzeichnis Einführung Verwenden des strik...
Beispiel für die Bereitstellungsmethode „Forever+nginx“ einer Node-Site
Ich habe vor Kurzem den günstigsten Tencent-Cloud...
Geschickte Nutzung von WebKit-Box-Reflect zur Erzielung verschiedener dynamischer Effekte (Zusammenfassung)
In einem Artikel vor langer Zeit habe ich über di...
Kurs zur Web-Frontend-Entwicklung Was sind die Web-Frontend-Entwicklungstools
Mit der Entwicklung der Internettechnologie werde...
Klassischer Beispielcode für JavaScript-Funktionsaufrufe
Inhaltsverzeichnis Klassisches Beispiel für einen...
Nginx-Server fügt benutzerdefinierte Systemd-Dienstprozessanalyse hinzu
1. Nehmen Sie nginx als Beispiel Nginx mit dem Be...
Analyse und Lösung der Ursache für den Verlust des Webseitenstils durch das automatische Ausfüllen von Formularen durch den Browser
Vom Backend zum Frontend: was für eine Tragödie. A...