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

This article mainly introduces the relevant knowledge of "how to display css text vertically". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "how to display css text vertically" can help you solve the problem.

The first method of vertical display of css text:

Use the writing-mode property

Syntax: writing-mode:lr-tb or writing-mode:tb-rl

Parameter: lr-tb: left to right, top to bottom; tb-rl: top to bottom, right to left.

Test

.one {

Margin:0auto

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 is writing-mode:tb-rl;*/ from left to right, from right to left.

}

Ten rounds of frost shadow turned to the court, and the jailer turned into a corner on this evening.

Not necessarily element E without melancholy hate, jade toad cold sweet-scented osmanthus solitary.

This method is not compatible and can only be supported in IE browsers, so it is not recommended, so here you can refer to the css online manual for more information.

The second method of vertical display of css text:

The setting of the width of the text object can only arrange the width distance of one text, so that the text line can not fit into two text lines, so that the text automatically wraps, which forms the requirement of vertical typesetting.

Test

.one {

Width:52px

Margin:0auto

Line-height:56px

Font-size:50px

}

Mid-Autumn Festival moon

Note: when word-wrap:break-word;/* is in English, you need to add this sentence, automatic line wrapping * /

Description: set a smaller width for the text DIV so that only one text can be arranged in a row, so that the text will automatically wrap to achieve vertical typesetting.

This is the end of the content about "how to display css text vertically". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.