CSS竖排文字技巧：writing-mode使用教程

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《CSS竖排文字技巧：writing-mode实用教程》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

要实现文字竖向排列，最核心的属性是writing-mode，它通过改变文本流向和布局主轴来实现竖排效果，1. 使用writing-mode: vertical-rl可让文字从上到下、行从右到左排列，符合中文竖排阅读习惯；2. writing-mode会系统性改变盒模型的逻辑方向，使width变为逻辑高度，height变为逻辑宽度，块级流从右向左堆叠，内联元素从上到下排列；3. margin和定位属性随之按逻辑方向重新解释，top仍为物理顶部，但“块开始”方向变为right；4. 图片、表单元素在竖排容器中可能出现方向错乱或对齐问题，需单独设置writing-mode或调整布局；5. 滚动条方向受主轴变化影响，超出内容可能触发横向滚动条，需通过overflow-x/y或Flexbox调整；6. text-orientation用于控制字符方向，mixed让数字英文横躺，upright使其旋转90度正立显示；7. text-combine-upright可将多个字符（如数字）组合成横向文本块嵌入竖排流中，适用于日期、代号等场景；8. 实际应用中需注意字体支持、第三方组件兼容性及响应式设计的复杂性，结合Flexbox或Grid等逻辑布局模型可更精准控制竖排效果，最终实现符合视觉预期的竖向文本呈现。

在CSS里，要让文字竖着排列，最核心的属性就是writing-mode。它不仅能控制文字的方向，还会影响整个布局流，让你的内容从横向排布变为纵向呈现，就像传统卷轴或日文漫画那样。

解决方案

实现文字竖向排列，主要就是利用CSS的writing-mode属性。这个属性定义了文本行是水平还是垂直排列，以及块级流的方向。

常用的值有：

• vertical-rl：文字从上到下排列，行从右到左排列。这是最常见的日文、中文竖排方式。
• vertical-lr：文字从上到下排列，行从左到右排列。
• horizontal-tb：默认值，文字从左到右（或右到左，取决于direction），行从上到下排列。

举个例子，如果你想让一个div里面的文字竖着显示，并且是从右往左排版（像我们平时看的竖版书）：

.vertical-text-container {
  writing-mode: vertical-rl;
  /* 调整一下字体大小和行高，让效果更明显 */
  font-size: 18px;
  line-height: 1.8;
  border: 1px solid #ccc;
  padding: 10px;
  width: 50px; /* 注意这里宽度会影响块级元素的“高度”感知 */
  height: 200px;
  overflow: auto;
}

<div class="vertical-text-container">
  这是一段测试文字，用来演示CSS的writing-mode属性如何实现文字的竖向排列。它能够改变文本的流向，让内容呈现出不同的视觉效果。
</div>

通过writing-mode，整个容器的“主轴”就变了。原本的宽度变成了“逻辑高度”，高度变成了“逻辑宽度”。也就是说，如果内容超出了width，它会向下（逻辑上的“右”）溢出，而不是向右溢出。这一点，初次接触时可能会有点绕。

如果你需要进一步控制竖排文字中单个字符的方向，比如数字、英文单词或标点符号，它们在竖排模式下默认可能会是“横躺”的，这时就需要text-orientation属性来帮忙了。

writing-mode 除了文字方向，对页面布局还有哪些深层影响？

说实话，writing-mode远不止让文字“站起来”那么简单，它对整个CSS盒模型和布局流的影响是系统性的。我个人觉得，理解它对“逻辑方向”的改变是关键。

首先，它会彻底改变块级流的方向。在默认的horizontal-tb模式下，块级元素是从上往下堆叠的。但当你设置了writing-mode: vertical-rl，块级元素就会从右往左堆叠了。想象一下，原本margin-top和margin-bottom控制的是垂直间距，现在它们会变成控制水平间距，而margin-left和margin-right则控制垂直间距。这听起来有点反直觉，但在逻辑上是完全一致的：它们依然是控制“块开始”和“块结束”方向上的外边距。

其次，内联流的方向也随之改变。原本内联元素（比如span、a）是在一行内从左到右（或右到左）排列的。在vertical-rl模式下，它们会从上到下排列。这直接影响了文本的阅读方向和行内元素的布局。

还有一点很容易被忽视，那就是相对定位和绝对定位的参考系也会跟着变。top、right、bottom、left这些属性，它们的“物理”含义不变，但它们的“逻辑”含义会变。比如，在vertical-rl模式下，top: 0依然是物理上的顶部，但它不再是“块开始”方向。如果你想定位到“块开始”方向，你可能需要使用right: 0（如果direction是ltr）。这使得一些依赖物理方向的布局变得复杂。

所以，当你使用writing-mode时，最好把你的思维从“物理的上下左右”转换到“逻辑的开始-结束、行开始-行结束”上来。Flexbox和Grid布局在处理writing-mode时会变得非常强大，因为它们本身就是基于逻辑方向的，比如flex-direction: column在vertical-rl模式下，其行为会与flex-direction: row在horizontal-tb模式下类似，因为它依然是沿着“块轴”排列。

在实际项目中应用 writing-mode 时，常会遇到哪些布局挑战？

在实际项目里用writing-mode，确实会碰到一些让人挠头的问题。我总结了几点比较常见的：

一个比较典型的是图片和图标的对齐问题。当文字竖起来后，图片或图标如果还是按常规的display: inline-block或者vertical-align: middle，它们可能会“横躺”在那里，或者对齐方式变得很奇怪。你需要为它们单独设置writing-mode: horizontal-tb来让它们保持正常方向，或者调整vertical-align等属性来适应新的流向。有时候，把图片用display: block或者flex容器包裹起来，再调整其自身的定位，会更容易控制。

表单元素也是个老大难。input、textarea、button这些原生控件，它们在writing-mode下的表现往往不尽如人意。比如，一个input框可能依然保持横向输入，但它的边框和背景却跟着父容器竖过来了，看起来非常别扭。很多时候，为了保持用户体验的一致性，我们会选择在竖排文本区域旁边单独放置横向的表单元素，或者对这些元素进行深度定制。

再来就是滚动条的方向。如果你有一个竖排的容器，内容超出了其可视范围，默认情况下，浏览器可能会在物理上出现一个横向滚动条，而不是我们期望的竖向滚动条（因为它的“主轴”是横向的）。这需要通过overflow-x和overflow-y的组合，或者更巧妙地利用transform或Flexbox来调整。例如，一个height固定的div，在writing-mode: vertical-rl下，如果内容过多，它的物理宽度会增加，从而出现横向滚动条。

还有，一些第三方库或组件可能没有充分考虑到writing-mode的兼容性。它们可能内置了对width/height的物理假定，导致在竖排模式下布局错乱。这时候，往往需要手动覆盖它们的样式，或者寻找替代方案。

最后，响应式设计也是一个挑战。在不同屏幕尺寸下，你可能需要动态切换writing-mode，或者为竖排和横排提供两套不同的布局方案。这增加了CSS的复杂性，也对开发者的逻辑思维提出了更高要求。

如何精细控制竖排文字中单个字符（如标点、数字、英文）的方向？

在竖排文字里，我们经常会遇到一些字符，比如数字、拉丁字母、某些标点符号（如括号、引号），它们默认情况下可能会“躺着”显示，这在视觉上并不总是我们想要的。这时，text-orientation属性就派上用场了，它专门用来控制这些字符在竖排文本中的方向。

text-orientation有几个关键值：

• mixed：这是默认值。数字、拉丁字母、以及一些标点符号（如感叹号、问号）会保持它们的原始方向（即横向），而其他字符（如汉字）则会竖直显示。所以你看到数字和英文会是“横躺”的。
• upright：所有字符都尝试以“正直”的方式显示，即它们自身的顶部总是朝向行首。对于拉丁字母和数字，它们会旋转90度，使得它们的基线与文本流方向平行。但需要注意，这通常只适用于单字符，连续的英文单词或数字串可能会被拆开。
• sideways：所有字符都以“横向”的方式显示，即它们的基线与文本流方向垂直。这基本上会让所有字符都像在横向文本中一样“躺着”，然后整个文本块旋转。

通常，在writing-mode: vertical-rl或vertical-lr的场景下，我们会根据设计需求选择mixed或upright。

.vertical-text-upright {
  writing-mode: vertical-rl;
  text-orientation: upright; /* 让所有字符都尝试正直显示 */
  font-size: 20px;
  line-height: 1.5;
  border: 1px solid #ccc;
  padding: 10px;
  height: 250px;
  width: 60px;
}

.vertical-text-mixed {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* 默认行为，数字英文会横躺 */
  font-size: 20px;
  line-height: 1.5;
  border: 1px solid #ccc;
  padding: 10px;
  height: 250px;
  width: 60px;
  margin-left: 20px;
}

<div class="vertical-text-upright">
  这是一个测试，包含数字123和英文ABC。请看它们是否正直。
</div>
<div class="vertical-text-mixed">
  这是一个测试，包含数字123和英文ABC。请看它们是否横躺。
</div>

除了text-orientation，还有一个不太常用但有时很有用的属性是text-combine-upright。它允许你将多个字符（通常是2-4个数字或符号）组合起来，作为一个整体，以横向的方式在竖排文本中显示，就好像一个小的横向文本块嵌入在竖排文本中一样。这在处理年份、月份或特定缩写时非常有用，避免了每个字符都竖排的尴尬。

.combine-upright-example {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 24px;
  line-height: 1.8;
  border: 1px solid #ccc;
  padding: 10px;
  width: 80px;
  height: 300px;
}

<div class="combine-upright-example">
  今天是<span style="text-combine-upright: all;">2024</span>年<span style="text-combine-upright: all;">08</span>月<span style="text-combine-upright: all;">15</span>日。
  <br>
  项目代号：<span style="text-combine-upright: all;">XYZ</span>。
</div>

通过这些属性的组合使用，我们才能对竖排文本的视觉呈现有更精细、更符合设计预期的控制。不过，实际应用中，text-orientation: upright对连续的英文单词或数字串的支持并不是完美的，有时它们仍然会显得比较生硬，需要根据具体字体和内容进行权衡。

好了，本文到此结束，带大家了解了《CSS竖排文字技巧：writing-mode使用教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！