How to make text Vertical typesetting by css

This article introduces the relevant knowledge of "how css makes text vertical typesetting". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In css, you can use the writing-mode attribute to make the text typeset vertically, just add "writing-mode:vertical-lr;", "writing-mode:vertical-rl;" or "writing-mode:tb-rl" style to the text element.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Css's method of typesetting text vertically:

Sometimes the text in the web page cannot be displayed horizontally because of special requirements, so what is needed is to let the text be displayed vertically, so how to make the text displayed vertically in the web page? Next, this article will introduce the method of vertical display of text in css. I hope it will be helpful to you.

Use the writing-mode property

The writing-mode property defines how the text is arranged horizontally or vertically.

Syntax:

Writing-mode:vertical-rl | vertical-lr | lr-tb | tb-rl

Parameters:

Vertical-rl: writing vertically from right to left. That is top-bottom-right-left

Vertical-lr: vertical content from top to bottom, horizontal from left to right

Lr-tb: from left to right, from top to bottom

Tb-rl: from top to bottom, from right to left.

Example:

Test. One {margin: 0 auto; height: 140px; writing-mode: vertical-lr;/* from left to right, from right to left is writing-mode: vertical-rl;*/} study hard and make progress every day. Happiness, such as the East China Sea, lives longer than Nanshan.

The effect is as follows:

Or through:

Test. One {margin: 0 auto; height: 140px; writing-mode: vertical-rl;} study hard and make progress every day. Happiness, such as the East China Sea, lives longer than Nanshan.

Or:

Test. One {margin: 0 auto; height: 140px; writing-mode: tb-rl;/* from left to right, from right to left is writing-mode: vertical-rl;*/} study hard and make progress every day. Happiness, such as the East China Sea, lives longer than Nanshan.

Output result:

This is the end of the content of "how to make text Vertical typesetting in css". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!