CSS text-orientation 语法
在 CSS 中，text-orientation 属性用于定义行内文本字符的方向，该属性仅在垂直模式（即 writing-mode: vertical-rl;）下有效。
语法：
text-orientation: 关键字;说明：
text-orientation 的取值是一个关键字，常用的如下所示。
mixed（默认值）：中文、日文、韩文等字符会保持直立，而字母、数字等会侧向显示（旋转 90°），如下图所示。
upright：所有字符都会保持直立，如下图所示。
sideways：所有字符都会侧向显示（旋转 90°），如下图所示。对于从左到右的文本 (writing-mode: vertical-lr;)，字符通常向右旋转；对于从右到左的文本 (writing-mode: vertical-rl;)，字符通常向左旋转。
注意:
- text-orientation 属性只会在 writing-mode 设置为 vertical-rl 或 vertical-lr 时才有明显效果。
- text-orientation 属性不会改变字符的排序方向，而只改变字符本身的显示方向。
CSS text-orientation 摘要
| 属于 | CSS 文本属性 |
|---|---|
| 使用频率 | 低 |
| 是否继承 | 是 |
| 默认值 | mixed |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS text-orientation 示例
接下来，我们通过一个简单的例子来讲解一下 CSS text-orientation 属性是如何使用的。
示例：text-orientation 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
padding: 10px;
font-size: 20px;
background-color: skyblue;
writing-mode: vertical-rl;
text-orientation: mixed;
}
</style>
</head>
<body>
<div>绿叶网ABCabc</div>
</body>
</html>页面效果如下图所示。
分析：
text-orientation 属性需要搭配 writing-mode 属性来使用，其中 writing-mode 需要设置为 vertical-rl。
对于上面例子来说，如果改为 text-orientation: upright;，此时页面效果如下图所示。
如果改为 text-orientation: sideways;，此时页面效果如下图所示。
