Wie zeige ich CSS-Text vertikal an? So zeigen Sie CSS-Text vertikal an-CSS-Tutorial-php.cn

Wie zeige ich CSS-Text vertikal an? So zeigen Sie CSS-Text vertikal an

不言

Freigeben： 2018-09-18 14:07:48

Original

25107 Leute haben es durchsucht

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-rl

Parameter: 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>

Nach dem Login kopieren

Der vertikale Anzeigeeffekt von CSS-Text ist wie folgt:

Wie zeige ich CSS-Text vertikal an? So zeigen Sie CSS-Text vertikal an

Diese Methode weist eine schlechte Kompatibilität auf und ist nur in IE-Browsern verfügbar Es kann nur unterstützt werden, daher wird die Verwendung nicht empfohlen. Wenn Sie mehr wissen möchten, können Sie sich das

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>

Nach dem Login kopieren

Hinweis: Zeilenumbruch: break-word;/*Sie müssen diesen Satz auf Englisch hinzufügen, um die Zeile automatisch umzubrechen*/

Anleitung: Stellen Sie eine kleinere Breite für den Text DIV ein, sodass nur ein Text in einer Zeile angeordnet werden kann, sodass der Text automatisch umgebrochen wird, um ein vertikales Spaltenlayout zu erreichen.

CSSDer Effekt der vertikalen Textanzeige ist wie folgt:

Wie zeige ich CSS-Text vertikal an? So zeigen Sie CSS-Text vertikal an

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>

Nach dem Login kopieren

css Der vertikale Anzeigeeffekt von Text ist wie folgt:

Wie zeige ich CSS-Text vertikal an? So zeigen Sie CSS-Text vertikal an

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>

Nach dem Login kopieren

Der Effekt der vertikalen Anzeige von CSS-Text ist wie folgt:

Wie zeige ich CSS-Text vertikal an? So zeigen Sie CSS-Text vertikal an

Dieser Artikel wurde hier tatsächlich vorgestellt. Es gibt noch viel mehr. Die Methode kann die vertikale Anzeige von Text realisieren, die hier nicht einzeln vorgestellt wird. Für mehr Spannung können Sie einen Blick auf die chinesische PHP-Website werfen.

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!