Heim  >  Artikel  >  Web-Frontend  >  CSS, um einen vertikalen Texteffekt zu erzielen

CSS, um einen vertikalen Texteffekt zu erzielen

王林
王林nach vorne
2020-04-18 09:08:183151Durchsuche

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

CSS, um einen vertikalen Texteffekt zu erzielen

.onecn{
     width: 20px;  
    margin: 0 auto;  
    line-height: 24px;  
}

(Empfohlenes Tutorial: CSS-Einführungs-Tutorial)

CSS, um einen vertikalen Texteffekt zu erzielen

.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

CSS, um einen vertikalen Texteffekt zu erzielen

.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!

Stellungnahme:
Dieser Artikel ist reproduziert unter:jb51.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen