This article provides three methods for vertical display of text in CSS.
Method 1: Use the writing-mode Attribute
In CSS, the vertical display of text can be set using the "writing-mode" property. Just add the "{writing-mode:vertical-rl; }" or "{writing-mode:vertical-lr; }" style to the text element.
writing-mode has the following property values.
horizontal-tb: horizontal display, that is, displaying text horizontally, isthe most common default style.
vertical-rl: vertical display, which is the style implemented in the above picture
vertical-lr: vertical display, arranged from top to bottom according to the content, and the above properties are generally compatible and replaced
sideways-rl: Arrange from top to bottom according to the vertical direction of the content
sideways-lr: Arrange from bottom to top according to the vertical direction of the content, which is generally compatible with the above properties
The writing-mode property defines the horizontal or vertical layout of text and the direction in which text travels within block-level elements. When setting the book for the whole document, it should be set on the root element (for HTML documents it should be set on the HTML element).
<div class="box">
ITCodar.com
</div>
<style>
.box {
writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: vertical-lr;
letter-spacing:5px;
}
</style>
Note: If you need to adjust the distance between words, the line height is invalid. Need to use letter spacing to change the word spacing.
Method 2: Set the Element Width
Set the width of the element, only the width of one font can be displayed. See the example below.
<div class="box">
ITCodar.com
</div>
<style>
.box {
width: 20px;
font-size: 16px;
padding: 2px;
}
</style>
The width of the box here is only 20px, and only one text can be arranged in a line, which achieves the effect of a wrapping display.
Method 3: Use br to Wrap the Line
Use br for newlines (deprecated). Here is an example.
<div class="box"> Front-end<br/>Front-end<br/>Development<br/>Development<br/>Network </div>
This operation is more troublesome. If it is dynamic data, it is very troublesome. After getting the data, you can't loop and add br after each word to achieve it! It is still recommended to use the first method to achieve this.