请解释 writing-mode 属性的作用，以及如何使用它实现垂直文本。

推荐答案

writing-mode 属性用于定义文本的排版方向，它可以控制文本的水平或垂直走向，以及文本块内的行方向。主要有以下几个取值：

• horizontal-tb: 水平方向，从上到下排列，这是默认值。
• vertical-rl: 垂直方向，从右到左排列。
• vertical-lr: 垂直方向，从左到右排列。

要实现垂直文本，可以使用 writing-mode: vertical-rl 或 writing-mode: vertical-lr。

示例：

.vertical-text-rl {
  writing-mode: vertical-rl;
}

.vertical-text-lr {
  writing-mode: vertical-lr;
}

本题详细解读

writing-mode 属性详解

writing-mode 属性定义了文本块中文字的流动方向。这个属性最初设计用于支持不同的书写系统，但现在也被广泛用于创建各种特殊的文本布局效果。理解其值对布局至关重要。

• horizontal-tb (默认值):
  这是最常见的文本排版模式。文本从左到右水平排列，并且从上到下一行一行地堆叠。

• vertical-rl:
  文本垂直排列，并且从右到左一列一列地堆叠。适用于传统的东方书写系统，例如日语和中文（竖排）。注意：行内元素也会垂直排列，并影响布局。

• vertical-lr:
  文本垂直排列，并且从左到右一列一列地堆叠。不常见，主要用于某些特殊的排版需求，也适用于部分语言。注意：行内元素也会垂直排列，并影响布局。

其他值（不常用）：

• sideways-rl: 文本水平排列，但是整个文本块的阅读方向是从上到下，并且文字方向是旋转90度后的从右到左。

• sideways-lr: 文本水平排列，但是整个文本块的阅读方向是从上到下，并且文字方向是旋转90度后的从左到右。

• tb: horizontal-tb 的别名

• lr: horizontal-tb 的别名

• rl: horizontal-tb 的别名

• lr-tb: horizontal-tb 的别名

• rl-tb: horizontal-tb 的别名

• tb-rl: vertical-rl 的别名

• bt-rl: vertical-rl 的别名

• tb-lr: vertical-lr 的别名

• bt-lr: vertical-lr 的别名

如何实现垂直文本

使用 writing-mode 实现垂直文本非常简单。 主要使用的值是 vertical-rl 和 vertical-lr。

选择 vertical-rl 还是 vertical-lr 的依据

• 如果你的目标是模拟传统的从右向左的垂直文本(例如传统的中文或日语)，应该使用 vertical-rl。
• 如果你的目标是从左向右的垂直文本(在一些特殊布局中需要)，应该使用 vertical-lr。

示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<style>
.vertical-text-rl {
  writing-mode: vertical-rl;
  border: 1px solid #ccc;
  padding: 10px;
  display: inline-block;
}
.vertical-text-lr {
  writing-mode: vertical-lr;
  border: 1px solid #ccc;
  padding: 10px;
   display: inline-block;
}
</style>
</head>
<body>

<div class="vertical-text-rl">
  垂直文本从右到左
</div>

<div class="vertical-text-lr">
    垂直文本从左到右
</div>
</body>
</html>

注意事项：

• 使用 writing-mode 后，元素的尺寸可能会受到影响。特别是对于包含大量文本的元素，可能需要调整高度和宽度来适应垂直布局。
• writing-mode 也会影响 text-align 和 line-height 等属性。需要根据具体的布局需求进行调整。
• 某些浏览器可能对 writing-mode 的支持程度有所不同，因此在实际使用时应该进行充分的兼容性测试。
• 对于复杂的布局，你可能需要结合其他的CSS属性，例如 flexbox 或 grid，来实现更精确的控制。