How to set the vertical display of text by css

Editor to share with you how to set css text vertical display, I hope you have something to gain after reading this article, let's discuss it together!

In css, you can use the "writing-mode" attribute to set the vertical display of text, just add "{writing-mode:vertical-rl;}" or "{writing-mode:vertical-lr;}" style to the text element.

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

The method of setting Vertical display of text by css

Let's create a new html web page file and name it test.html, and then we'll use the test.html file to explain how css3 sets the text to be displayed vertically. To create a line of text using the div tag, and write the text with the words "how css3 sets the text to display vertically." Set the class property of the div tag to mybkkd.

Write a css style label, and the mybkkd style will be written inside the tag.

Within the css tag, the text is displayed vertically through the class attribute mybkkd of the div tag. In parentheses, the div of mybkkd sets the css attribute style to writing-mode: vertical-rl; or writing-mode: vertical-lr

How Document .mybkkd {writing-mode:vertical-rl;} caa3 sets the text to be displayed vertically

There is another style, with an example as follows:

How Document .mybkkd {writing-mode:vertical-lr;} caa3 sets the text to be displayed vertically

The output results in the above two examples are the same. Browse the test.html in the browser to see if the effect can be achieved.

After reading this article, I believe you have a certain understanding of "how to set up vertical text display in css". If you want to know more about it, welcome to follow the industry information channel. Thank you for your reading!