Heim > Artikel > Web-Frontend > So zeigen Sie HTML-Text vertikal an
So zeigen Sie HTML-Text vertikal an
- php中世界最好的语言Original
- 2017-11-23 15:41:0718151Durchsuche
Manchmal muss ein Textabschnitt vertikal von oben nach unten angezeigt werden. Welche Vorgänge müssen wir also in CSS ausführen, um den Text vertikal auf der Webseite anzuzeigen? Heute werde ich diese Frage für Sie beantworten
Manchmal müssen wir einen Textabschnitt vertikal von oben nach unten eingeben. Wir wissen, dass es in CSS einen Stil gibt, der die vertikale Eingabe ermöglicht. Aber nicht alle Browser sind vollständig kompatibel. Musste aufgeben. Es gibt jedoch zwei Möglichkeiten, Textschriftarten vertikal anzuzeigen. Mithilfe von Wissenserklärungen und praktischen Falldemonstrationen ermöglichen wir Ihnen die vertikale Anzeige von Textschriftarten auf Chinesisch.
Ursprüngliche Verwendung des Attributs writing-mode – nicht empfohlen
Syntax: writing-mode:lr-tb oder writing-mode:tb- rl
Parameter:
1. lr-tb: von links nach rechts, von oben nach unten
2 links
Beim Ausführen des Codes wurde festgestellt, dass der IE normal angezeigt wird, Firefox und Google Chrome dies jedoch nicht unterstützen. Daher wird die Verwendung des Schreibmodusattributs nicht empfohlen.
Verstehen Sie den Schreibmodus des CSS-Handbuchs
Verwenden Sie CSS, um die vertikale Textanordnung zu simulieren
Durch Festlegen der Breite des Textobjekts kann nur der Breitenabstand des nächsten festgelegt werden Text, sodass der Text in einer Zeile angeordnet werden kann. Nicht weniger als zwei Zeichen sorgen dafür, dass der Text automatisch umbrochen wird, wodurch eine Anforderung für den vertikalen Schriftsatz entsteht.
1. Vollständiger HTML-Quellcode (einschließlich div+css-Code):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>竖列排版实例 </title>
<style>
body{text-align:center}
.shuli{ margin:0 auto;width:20px;line-height:24px;border:1px solid #333}
</style>
</head>
<body>
<div class="shuli">我是竖列排版</div>
</body>
</html>Hinweis: Stellen Sie eine kleinere Breite für den Text DIV ein, damit nur ein Text in einer Zeile platziert werden kann , sodass der Text automatisch umgebrochen wird, um ein vertikales Spaltenlayout zu erreichen.
Verwenden Sie eine kleinere Breite, um mehr als zwei Wörter hintereinander anzuzeigen, damit der Text automatisch umgebrochen werden kann.
Verwenden Sie den br-Zeilenumbruch, um den Text vertikal anzuzeigen.
Verwenden Sie den HTML-br-Zeilenumbruch-Tag, um den Text nach jedem Text umzubrechen, damit er in vertikalen Spalten angezeigt wird .
1. Vollständiger HTML-Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>竖列排版实例 在线演示 </title>
<style>
body{text-align:center; line-height:22px}
/* CSS注释说明：设置css文字居中，css行高为22px间隔 */
</style>
</head>
<body>
我<br>是<br>竖<br>列<br>排<br>版
</body>
</html>Verwenden Sie das br-Zeilenumbruch-Tag, um eine vertikale Textschriftart zu erreichen.
Durch die beiden oben genannten Div-CSS-Fälle wird jeder lernen Durch die Verwendung von CSS und der Methode html tag wird der Text mit dem vertikalen Spaltenlayout der gängigen Browser kompatibel.
Durch die oben genannten Fälle glaube ich, dass jeder bereits mit dem vertikalen Spaltenlayout vertraut ist. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
p Absatzzeilen in HTML So legen Sie fest hoher Zeilenabstand
So verwenden Sie das 1aa9e5d373740b65a0cc8f0a02150c53-Tag von HTML
Das obige ist der detaillierte Inhalt vonSo zeigen Sie HTML-Text vertikal an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!