Heim > Artikel > Web-Frontend > CSS, um einen vertikalen Texteffekt zu erzielen
Die Standardanordnung von chinesischem Text in HTML ist horizontal, in einigen Sonderfällen muss der Text jedoch vertikal angeordnet werden.
Eine einzelne Textzeile, vertikal angeordnet
.onecn{ width: 20px; margin: 0 auto; line-height: 24px; }
(Empfohlenes Tutorial: CSS-Einführungs-Tutorial)
.oneen{ width: 15px; margin: 0 auto; line-height: 24px; font-size: 20px; word-wrap: break-word;/*英文的时候需要加上这句,自动换行*/ word-break:break-all; }
Erläuterung: Um eine einzeilige vertikale Anordnung des Textes zu erreichen, müssen Sie die Breite nur so einstellen, dass gerade eine Schriftart Platz findet.
Mehrzeiliger Text vertikal angeordnet
.two{ margin: 0 auto; height: 140px; writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/ writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl;*/ }
Hinweis: Die Höhe ist sehr wichtig, wenn Sie den Abstand und den Zeilenabstand des Textes steuern müssen Fügen Sie die Attribute Buchstabenabstand und Zeilenhöhe hinzu.
Empfohlene verwandte Video-Tutorials: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonCSS, um einen vertikalen Texteffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!