一、基本概念

csswriting-mode属性决定了文本在垂直或水平方向上的排布方式。 它有四个可能的值：horizontal-tb、vertical-rl、vertical-lr和sideways-lr，分别指代水平从左到右、垂直从右到左、垂直从左到右和倾斜排列。 其中，vertical-rl和vertical-lr通常称为竖排模式，sideways-lr通常用于横排排版的情况下商品名称等标签的排列。

二、水平方向的排列方式

在水平排列的情况下，文本的行为行内元素，排列时会遵循常见的左对齐、右对齐、居中等排版方式。 在以下的例子中，我们将一个块级元素设置为inline-block，并通过text-align属性来控制其中文本的对齐方式。注意，我们设置了width属性的值，以便让这个块级元素在水平方向上占据一定的空间。

.block {
 display: inline-block;
 width: 200px;
 height: 200px;
 background-color: #eee;
 text-align: center;
}

<div class="block"><span>水平排列方式示例</span></div> # 三、竖直方向的排列方式 ## 3.1 竖排模式 在竖排模式中，文本的行为块级元素。这时文本的排版方式也会随之改变，常见的排版方式有从上到下、从下到上、居中等方式。CSS中可以通过`writing-mode`和`text-orientation`属性来控制文本的排列方式。 ```css .vertical-text { writing-mode: vertical-rl; text-orientation: upright; font-size: 20px; } ``` <div class="vertical-text"> 竖排模式<br> 从右到左 </div> ## 3.2 倾斜排列 倾斜排列通常用于横排排版的情况下商品名称等标签的排列，以达到更好的展示效果。 ```css .sideways-text { writing-mode: sideways-lr; text-orientation: mixed; font-size: 20px; } ``` <div class="sideways-text"> 倾斜排列 </div> # 四、文字方向 除了上述排版方式之外，CSS还支持在特定排版方式下，通过`direction`属性来控制文字的方向。例如，在使用`vertical-lr`和`sideways-lr`排版方式时，需要通过`direction`属性来控制文字的方向。 ```css .vertical-text-rl { writing-mode: vertical-rl; direction: rtl; font-size: 20px; } ``` <div class="vertical-text-rl"> 从右到左排列 </div> ```css .sideways-text-rl { writing-mode: sideways-lr; direction: rtl; font-size: 20px; } ``` <div class="sideways-text-rl"> 从右到左排列 </div>