Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use css to achieve vertical text, the article is very detailed, has a certain reference value, interested friends must read it!

The default arrangement of text in html is horizontal, but in some special cases it is necessary to arrange text vertically.

Vertical arrangement of single-line text

.onecn {

Width: 20px

Margin: 0 auto

Line-height: 24px

}

.oneen {

Width: 15px

Margin: 0 auto

Line-height: 24px

Font-size: 20px

Word-wrap: when break-word;/* is in English, you need to add this sentence to automatically wrap the line * /

Word-break:break-all

}

Description: to achieve a single-line vertical arrangement of text, you only need to set the width to just hold the width of a font.

Vertical arrangement of multiline text

.two {

Margin: 0 auto

Height: 140px

Writing-mode: vertical-lr;/* from left to right, from right to left is writing-mode: vertical-rl;*/

Writing-mode: tb-lr;/*IE browser from left to right, from right to left is writing-mode: tb-rl;*/

}

Description: height is very important. If you need to control the spacing and line spacing of text, you can add attributes letter-spacing and line-height.

The above is all the contents of the article "how to use css to achieve vertical text layout". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.