最核心的方法是使用writing-mode属性实现文字竖向排版，1. 使用writing-mode: vertical-rl实现文字从上到下、行从右到左排列，适用于模拟古籍或日文排版；2. 使用writing-mode: vertical-lr实现文字从上到下、行从左到右堆叠，适用于特定设计需求；3. 配合text-orientation: upright保持字符直立，避免英文数字旋转；4. 处理对齐时结合text-align与flex的align-items或margin实现居中；5. 溢出方向随文本流改变，需根据writing-mode调整overflow-x或overflow-y；6. 调整line-height控制行距，letter-spacing控制字间距；7. 响应式中竖排文字占用宽度大，可在小屏通过media query切回横向或隐藏；8. 图片需旋转或重裁以适配竖排，避免与多媒体紧密耦合；9. 交互元素建议保持横排或增大点击区域以提升触屏体验；10. 与flexbox结合时，writing-mode会旋转主轴与交叉轴，flex-direction: column在vertical-rl下实现从上到下排列；11. grid布局中writing-mode影响行列定义，可实现复杂混合排版；12. 实际使用需注意旧浏览器兼容性，尤其text-orientation: upright的支持情况。
CSS实现文字竖向排版，最核心也最直接的方法就是使用
writing-mode这个CSS属性。它能彻底改变文本流的方向，让文字像传统书法那样从上到下、从右到左或从左到右排列。
解决方案
要实现文字的竖向排版，你主要会用到
writing-mode属性。这个属性决定了文本行布局的方向，以及块级内容的堆叠方向。
我个人在项目中，最常用到的是
vertical-rl和
vertical-lr这两个值：
立即学习“前端免费学习笔记（深入）”；
-
writing-mode: vertical-rl;
：这是最常见的竖排模式，文字从上到下排列，行从右到左堆叠。这很符合我们阅读日文或一些古籍的习惯，比如在网页侧边栏做一些标题，或者模拟古诗词的排版时，我就会倾向于用它。.vertical-text-rl { writing-mode: vertical-rl; /* 还可以配合其他属性调整细节 */ text-orientation: upright; /* 保持字符直立，而非旋转 */ white-space: nowrap; /* 防止自动换行 */ } -
writing-mode: vertical-lr;
：文字从上到下排列，行从左到右堆叠。这种模式在某些特定的设计场景下会有用，比如你希望文字竖排，但整体布局又希望从左侧开始。.vertical-text-lr { writing-mode: vertical-lr; text-orientation: mixed; /* 默认值，中文字符直立，英文字符旋转90度 */ }
另外，
text-orientation属性也相当关键。它控制着竖排文本中字符的方向。比如，如果你希望所有字符，包括英文数字，都能保持“直立”而不是旋转90度，那么
text-orientation: upright;就是你的好帮手。但要注意，
upright在旧版本浏览器上兼容性可能没那么好，实际使用时需要留意。而
mixed是默认值，它会让中文、日文等全角字符保持直立，而西文字符（比如英文、数字）则会旋转90度，这在很多时候反而是我们想要的，因为它更符合阅读习惯。
竖向排版时，文字的对齐和溢出问题如何处理？
当我们把文字变成竖向排版后，很多原本横向排版的经验就得重新审视了。我发现，文字的对齐方式和处理溢出是两个经常让人头疼的问题。
首先是对齐。在横向排版里，
text-align控制的是水平对齐，但在竖向排版里，
text-align实际上控制的是“行内轴”上的对齐，也就是每行文字内部的对齐。而
justify-content（如果父容器是flex或grid）或者说传统的块级元素中，控制“块级轴”的对齐方式，也就是行与行之间的对齐。举个例子，如果我希望竖排的文字在容器里居中，我可能需要结合
text-align: center;和
align-items: center;（如果父容器是flexbox）或者设置
margin: auto;。这块确实有点绕，需要多尝试。
其次是溢出。当文字内容超出容器时，横向排版我们会用
overflow-x，竖向排版自然就想到
overflow-y。但实际情况是，
writing-mode改变了文本流的方向，所以溢出方向也随之改变。比如，
writing-mode: vertical-rl;时，文本是从右往左堆叠的，如果内容过多，它会向左侧溢出，此时你可能需要关注
overflow-x来处理滚动条或隐藏。这有点反直觉，但你只要记住，溢出总是发生在文本流的“结束”方向就行了。我通常会给容器设置一个固定的高度或宽度，然后根据
writing-mode的方向来设置对应的
overflow属性，比如
overflow-x: auto;或
overflow-y: auto;。
此外，行高（
line-height）和字间距（
letter-spacing）在竖排模式下也需要重新调整。
line-height在竖排模式下控制的是行与行之间的距离，而
letter-spacing则控制字符与字符之间的距离。我常常会把
line-height设置得比字号大一些，让行间距更舒适，而
letter-spacing则根据字体和设计需求来微调，有时候甚至会用到负值来让字符更紧凑。
竖向排版在响应式设计中会带来哪些挑战？
竖向排版在响应式设计中确实是个挑战，它不像横向排版那样有成熟的响应式模式。我个人在处理这块的时候，通常会遇到几个比较棘手的问题。
一个主要问题是空间利用率。在小屏幕设备上，竖向排版会迅速占据屏幕的宽度，导致内容显示区域非常有限。比如，如果一个侧边栏的竖排标题在PC端看起来很酷，但在手机上可能就直接占满了整个屏幕宽度，或者导致其他主要内容被挤压。这时候，我可能会考虑在特定断点（media query）下，将
writing-mode改回
horizontal-tb，让它变回横向排版，或者干脆隐藏掉。这是一种“妥协”，但能确保用户体验。
另一个挑战是图片和多媒体元素的适应性。如果你的设计中包含了图片或者视频，并且它们需要和竖排文字一起呈现，那么它们的尺寸和方向就成了问题。图片通常是横向的，如果和竖排文字混排，可能需要进行旋转（使用
transform: rotate(90deg);）或者重新裁剪。但这又会带来新的问题，比如图片质量下降，或者旋转后占据的空间不符合预期。我通常的策略是，尽量避免在响应式设计中将图片与竖排文字紧密耦合，或者为不同屏幕尺寸准备不同的图片版本。
再者，交互元素，比如按钮、链接，如果也采用竖排文字，在触摸屏上可能会影响点击区域的判断。手指点击的精确度不如鼠标，竖排的细长按钮可能不太容易点中。这种情况下，我通常会把交互元素的文字保持横向，或者至少提供一个足够大的点击区域。
总的来说，在响应式设计中引入竖向排版，需要非常谨慎。我倾向于只在非核心内容、装饰性文本，或者特定文化背景（如日文网站）的场景下使用。对于核心内容，尤其是在移动端，横向排版依然是更稳妥、用户体验更好的选择。
CSS writing-mode
与其他布局方式（如Flexbox、Grid）的结合使用技巧有哪些？
将
writing-mode与Flexbox或Grid结合使用，可以创造出非常灵活和强大的布局效果。我发现，理解它们如何协同工作，关键在于搞清楚“主轴”和“交叉轴”的概念会如何随着
writing-mode的变化而改变。
当一个容器设置了
display: flex;或
display: grid;，并且其内部元素的
writing-mode被设置为竖向时，Flexbox或Grid的主轴和交叉轴会根据
writing-mode的方向进行调整。
以Flexbox为例： 默认情况下，
flex-direction: row;意味着主轴是水平的。但如果容器内的文本是
writing-mode: vertical-rl;，那么Flex项目（flex items）会从右到左排列，而每个Flex项目内部的文本则是竖向的。更进一步，如果你将Flex容器本身也设置了
writing-mode: vertical-rl;，那么整个Flex容器的主轴和交叉轴都会旋转90度。这时，
flex-direction: row;实际上会使项目从上到下排列（因为“行”变成了竖直方向），而
flex-direction: column;则会使项目从右到左排列。这听起来有点烧脑，但一旦你理解了轴向的这种“旋转”，很多布局问题就能迎刃而解。我通常会画个草图，把轴向标出来，这样会清晰很多。
举个例子，如果我想做一个竖排导航栏，每个导航项都竖排显示，并且从上到下排列：
.vertical-nav {
display: flex;
flex-direction: column; /* 让导航项从上到下排列 */
writing-mode: vertical-rl; /* 容器本身也竖排，所以主轴是垂直的 */
height: 100%; /* 假设有足够高度 */
justify-content: space-around; /* 垂直方向均匀分布 */
}
.vertical-nav a {
writing-mode: vertical-rl; /* 链接文字竖排 */
text-orientation: upright; /* 保持文字直立 */
padding: 10px 5px;
white-space: nowrap;
/* 其他样式 */
}在Grid布局中，这个概念同样适用。
grid-template-columns和
grid-template-rows的定义也会受到
writing-mode的影响。当你设置了
writing-mode后，
grid-template-columns实际上可能控制的是垂直方向的轨道，而
grid-template-rows控制的是水平方向的轨道。这使得创建复杂的混合布局变得可能，比如你可以在一个Grid布局中，某些单元格是横排文本，另一些是竖排文本，通过巧妙地结合
writing-mode和Grid的定位属性，可以实现非常独特的视觉效果。我个人觉得Grid在这方面提供了比Flexbox更大的自由度，因为它能更精确地控制二维布局。但同样的，这种轴向的转换需要一些时间去适应和理解。
