Heim > Artikel > Web-Frontend > Wie zeige ich CSS-Text vertikal an? So zeigen Sie CSS-Text vertikal an
Wie zeige ich CSS-Text vertikal an? So zeigen Sie CSS-Text vertikal an
- 不言Original
- 2018-09-18 14:07:4824953Durchsuche
Manchmal kann der Text auf der Webseite aufgrund besonderer Anforderungen nicht horizontal angezeigt werden. Zu diesem Zeitpunkt muss der Text also vertikal angezeigt werden. Der folgende Artikel stellt vor, wie man mit CSS eine vertikale Textanzeige erreicht.
Methode 1, um CSS-Text vertikal anzuzeigen:
Verwenden Sie das Writing-Mode-Attribut Syntax: writing-mode:lr-tb oder writing- Modus:tb-rlParameter: lr-tb: von links nach rechts, von oben nach unten; tb-rl: von oben nach unten, von rechts nach links.<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
</head>
<style>
.one {
margin: 0 auto;
height: 140px;
writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/
writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
}
</style>
<body>
<div class="one">十轮霜影转庭梧，此夕羁人独向隅。
未必素娥无怅恨，玉蟾清冷桂花孤。 </div>
</body>
</html>
Der vertikale Anzeigeeffekt von CSS-Text ist wie folgt:
CSS-Online-Handbuch ansehen.
Methode 2 zur vertikalen Anzeige von CSS-Text:
Stellen Sie die Breite des Textobjekts so ein, dass nur ein Text angeordnet werden kann, sodass der Text nicht in zwei passen kann Zeichen in einer Zeile Durch den automatischen Textumbruch ist ein vertikaler Schriftsatz erforderlich.<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
</head>
<style>
.one {
width: 52px;
margin: 0 auto;
line-height: 56px;
font-size: 50px;
}
</style>
<body>
<div class="one">中秋月</div>
</body>
</html>Hinweis: Zeilenumbruch: break-word;/*Sie müssen diesen Satz auf Englisch hinzufügen, um die Zeile automatisch umzubrechen*/
CSSDer Effekt der vertikalen Textanzeige ist wie folgt:
CSS-Text vertikal Anzeigemethode 3:
Es wird empfohlen, diese Methode zu verwenden. Ich denke, diese Methode ist gut kompatibel und der Code ist einfach<!DOCTYPE html>
<html>
<head>
<style>
h1 { width: 50px; font-size: 50px;letter-spacing: 20px; }
</style>
</head>
<body>
<h1>中秋月</h1>
</body>
</html>
css Der vertikale Anzeigeeffekt von Text ist wie folgt:
CSS-Text vertikale Anzeigemethode vier:
Verwenden Sie br zum Umbrechen. Der Text wird vertikal und vertikal angezeigt. Verwenden Sie das HTML-Zeilenumbruch-Tag br, um den Zeilenumbruch des Texts zu realisieren, und fügen Sie nach jedem Text ein Zeilenumbruch-BR-Tag hinzu, damit er in vertikalen Spalten angeordnet werden kann. <!DOCTYPE html>
<html>
<head>
<style>
body{text-align:center; line-height:60px;font-size:30px}
/* CSS注释说明：设置css文字居中，css行高为22px间隔 */
</style>
</head>
<body>
p<br>h<br>p<br>中<br>文<br>网
</body>
</html>
Der Effekt der vertikalen Anzeige von CSS-Text ist wie folgt:
Das obige ist der detaillierte Inhalt vonWie zeige ich CSS-Text vertikal an? So zeigen Sie CSS-Text vertikal an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!