Heim >Web-Frontend >CSS-Tutorial >Wie man Text mit CSS in Zeilen anzeigt
Wie man Text mit CSS in Zeilen anzeigt
- coldplay.xixiOriginal
- 2021-03-11 16:35:155949Durchsuche
So zeigen Sie Text in Zeilen in CSS an: 1. Verwenden Sie das Attribut [writing-mode], die Syntax ist [writing-mode:lr-tb oder writing-mode:tb-rl]; 2. Die Breite des Textes Objekt kann nur eingestellt werden Der Breitenabstand des nächsten Textes.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.
Css-Methode zum Anzeigen von Text in Zeilen:
Methode 1: Verwenden Sie das Schreibmodus-Attribut
Syntax:
writing-mode:lr-tb或writing-mode:tb-rl
Parameter: lr-tb: von links nach rechts, von oben nach unten; tb-rl: von oben nach unten, von rechts nach links.
<!DOCTYPEhtml>
<html>
<head>
<title>test</title>
<metacharset="UTF-8">
</head>
<style>
.one{
margin:0auto;
height:140px;
writing-mode:vertical-lr;/*从左向右从右向左是writing-mode:vertical-rl;*/
writing-mode:tb-lr;/*IE浏览器的从左向右从右向左是writing-mode:tb-rl；*/
}
</style>
<body>
<divclass="one">十轮霜影转庭梧，此夕羁人独向隅。
未必素娥无怅恨，玉蟾清冷桂花孤。</div>
</body>
</html>Diese Methode ist schlecht kompatibel und wird nur im IE-Browser unterstützt. Daher wird sie hier nicht vorgestellt. Wenn Sie mehr wissen möchten, können Sie sich das CSS-Online-Handbuch ansehen.
Methode 2 zur vertikalen Anzeige von CSS-Text:
Durch Festlegen der Breite des Textobjekts kann nur der Breitenabstand des nächsten Texts festgelegt werden, sodass der Text nicht in zwei Zeichen in einer Zeile passen kann, sodass der Text automatisch angezeigt wird Wraps, die einen vertikalen Schriftsatz erfordern.
<!DOCTYPEhtml>
<html>
<head>
<title>test</title>
<metacharset="UTF-8">
</head>
<style>
.one{
width:52px;
margin:0auto;
line-height:56px;
font-size:50px;
}
</style>
<body>
<divclass="one">中秋月</div>
</body>
</html>Hinweis: word-wrap:break-word;/*Sie müssen diesen Satz auf Englisch hinzufügen, um die Zeile automatisch umzubrechen*/
Empfohlene Tutorials: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonWie man Text mit CSS in Zeilen anzeigt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!