writing-mode
This property defines how the text is arranged horizontally or vertically
writing-mode:horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
Next, let's take a look at the usage of each attribute value with me! Go!
<style>
.root {
border: 1px solid green;
width: 400px;
height: 400px;
writing-mode: horizontal-tb;
}
</style>
<div class="root">实践是检验真理的唯一标准 实践是检验真理的唯一标准 实践是检验真理的唯一标准 实践是检验真理的唯一标准</div>
1、horizontal-tb
From this we can see that this attribute is actually the default arrangement of text from left to right in the horizontal direction and from top to bottom in the vertical direction
2、vertical-rl
From this we can see that this attribute is to arrange the text from top to bottom in the vertical direction, and then arrange it from right to left in the horizontal direction.
3、vertical-lr
From this we can see that this attribute is to arrange the text from top to bottom in the vertical direction, and then arrange it from left to right in the horizontal direction.
4、sideways-lr、sideways-rl
From this we can see that, in fact, the effect is the same as the arrangement of
horizontal-tbattribute values. This is because of browser compatibility issues, so the effect we want is not arranged. Friends, you can try it yourself~
