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如何实现文字竖向