欢迎来到CSS竖排文本讲座：text-orientation属性大揭秘

大家好，欢迎来到今天的CSS讲座！今天我们要聊的是一个非常有趣的CSS属性——text-orientation。这个属性可以帮助我们实现竖排文本的显示效果，特别适合那些需要在网页上展示中文、日文、韩文等竖排文字的场景。

什么是text-orientation？

text-orientation是一个CSS属性，它决定了行内元素（如文本）在垂直书写模式下的方向。简单来说，它控制着文本是横向排列还是竖向排列，甚至可以让你的文字“躺平”或“站立”。

默认行为

在默认情况下，文本是横向排列的，即使你使用了writing-mode: vertical-rl;将文本从左到右垂直排列，文本本身仍然是横向的。比如：

p {
  writing-mode: vertical-rl;
}

这段代码会让段落中的文本从右到左垂直排列，但每个字符仍然是横向的，就像这样：

中
国
梦

如果你想要让文本真正竖排显示，就需要用到text-orientation属性。

text-orientation的取值

text-orientation有三个主要的取值，分别是：

1. mixed
   这是默认值。在这种模式下，字母和符号会保持横向排列，而东亚语言的字符（如中文、日文、韩文）则会竖向排列。这非常适合用于混合语言的文本，因为它可以让不同语言的字符根据各自的书写习惯来显示。

   p {
    writing-mode: vertical-rl;
    text-orientation: mixed;
   }

   效果如下：

   H e l l o
   世 界

2. upright
   在这种模式下，所有的字符都会竖直排列，不会倾斜。无论是拉丁字母还是东亚字符，都会以竖直的方式显示。这适合用于完全竖排的文本，尤其是当你要确保所有字符都保持一致的方向时。

   p {
    writing-mode: vertical-rl;
    text-orientation: upright;
   }

   效果如下：

   H
   e
   l
   l
   o
   世
   界

3. sideways
   这个值会让所有字符横向排列，但整个文本块会旋转90度。也就是说，字母和符号会像平时一样横向排列，但整个文本块会被旋转成竖直方向。这适合用于那些需要保持横向字符外观的场景，但又希望文本整体呈现为竖排的效果。

   p {
    writing-mode: vertical-rl;
    text-orientation: sideways;
   }

   效果如下：

   Hello
   世界

实际应用案例

案例1：混合语言的竖排文本

假设你有一个包含英文和中文的段落，你想让中文竖排显示，而英文保持横向。这时候，text-orientation: mixed;就派上用场了。

<p class="mixed-text">Hello, 你好，World!</p>

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

效果如下：

H e l l o , 你 好 ， W o r l d !

案例2：完全竖排的文本

如果你有一段纯中文的文本，并且希望所有字符都竖直排列，那么text-orientation: upright;是最合适的选择。

<p class="upright-text">你好，世界</p>

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

效果如下：

你
好
，
世
界

案例3：横向字符的竖排布局

有时候，你可能希望文本整体呈现为竖排，但每个字符仍然是横向的。这时可以使用text-orientation: sideways;。

<p class="sideways-text">Hello, World!</p>

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

效果如下：

Hello, World!

浏览器支持情况

text-orientation属性在现代浏览器中已经得到了广泛的支持，但在一些较老的浏览器中可能会有问题。根据MDN文档，以下是一些主流浏览器的支持情况：

浏览器	支持版本
Chrome	58+
Firefox	68+
Safari	10.1+
Edge	79+

如果你需要支持更广泛的浏览器，建议你在使用text-orientation时，结合@supports规则进行兼容性处理。

@supports (text-orientation: mixed) {
  p {
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }
}

总结

今天我们学习了text-orientation属性，它可以帮助我们在CSS中轻松实现竖排文本的效果。通过不同的取值，我们可以灵活地控制文本的排列方式，适应各种语言和设计需求。无论你是想让文本“躺平”还是“站立”，text-orientation都能帮你搞定！

希望今天的讲座对你有所帮助，下次再见！如果有任何问题，欢迎随时提问。 😊

---

参考资料：

• MDN Web Docs: CSS text-orientation property
• W3C CSS Writing Modes Level 4 Specification

（注：本文引用的技术文档均为常见的国际标准文档，未插入外部链接。）