要实现文字竖向排列，最核心的属性是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;
}这是一段测试文字，用来演示CSS的writing-mode属性如何实现文字的竖向排列。它能够改变文本的流向，让内容呈现出不同的视觉效果。
通过
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;
}这是一个测试，包含数字123和英文ABC。请看它们是否正直。这是一个测试，包含数字123和英文ABC。请看它们是否横躺。
除了
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;
}今天是2024年08月15日。
项目代号：XYZ。
通过这些属性的组合使用，我们才能对竖排文本的视觉呈现有更精细、更符合设计预期的控制。不过，实际应用中，
text-orientation: upright对连续的英文单词或数字串的支持并不是完美的，有时它们仍然会显得比较生硬，需要根据具体字体和内容进行权衡。
