How to use css to realize Vertical text arrangement
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!
