CSS如何实现文字的垂直排列_通过writing-mode改变流方向css

writing-mode 通过改变块级容器的文本流方向实现竖排，但需配合 text-orientation、避免用于 flex/grid 父容器，并注意浏览器兼容性及中英文混排处理。

writing-mode 为什么能让文字竖排，但效果常不对

writing-mode 确实是控制文本流方向的核心属性，但它不是“一键竖排”，而是改变整个块的书写方向和行内顺序。常见误解是设了 writing-mode: vertical-rl 就万事大udge——结果发现文字倒着、换行错乱、甚至容器高度崩塌。

• 它影响的是块级盒的布局流向：vertical-rl 表示“从上到下、从右到左”（即传统中文竖排），vertical-lr 是“从上到下、从左到右”（日文常用）
• 行内元素（比如 span）不会继承该属性，必须作用在块容器（如 div、p）上
• 默认情况下，text-orientation 是 mixed，导致英文/数字仍保持水平旋转，中文字符才竖直；若要所有文字都“立着”，得额外设 text-orientation: upright

竖排中文时，标点、数字、英文怎么不歪着

竖排中英文混排最刺眼的问题：括号、逗号、阿拉伯数字横躺，破坏阅读节奏。这不是 bug，是 writing-mode 的默认行为。

• text-orientation: upright 强制所有字形垂直对齐（包括 ASCII 字符），但可能让英文可读性下降
• 更稳妥的做法是保留 text-orientation: mixed（默认），再用 unicode-bidi: plaintext + direction: ltr 对英文片段做局部矫正
• 标点符号需注意：中文全角标点（如《》、。、，）天然适配竖排；半角标点（如 “、”、”,”）会旋转90°，视觉错位，建议统一用全角

.vertical-text {   writing-mode: vertical-rl;   text-orientation: mixed; } .vertical-text code, .vertical-text .en-inline {   writing-mode: horizontal-tb;   display: inline-block; }

flex 或 grid 容器里用 writing-mode 容易塌掉

把 writing-mode 往 display: flex 或 display: grid 的父容器上一加，子项排列就乱套——因为 writing-mode 会重定义主轴方向，而 flex/grid 的 flex-direction 和 grid-template-rows/columns 仍按原始坐标系解析。

• 不要在 flex 容器本身设 writing-mode；应该只在需要竖排的文本块内部使用
• 若真需竖排布局（比如侧边导航文字），用 flex-direction: column 配合 transform: rotate(90deg) 更可控（但注意可访问性和缩放问题）
• grid 布局中，writing-mode 不影响网格线定义，但会影响单元格内内容的基线对齐，此时 align-items 和 justify-items 的语义会反转，容易误判

IE 和旧版 safari 对 vertical-rl 支持不稳定

writing-mode: vertical-rl 在 IE11 中支持，但存在两个关键限制：

立即学习“前端免费学习笔记（深入）”；

• 不支持 text-orientation: upright（始终为 mixed）
• vertical-lr 在 IE 中被识别为无效值，会回退到 horizontal-tb

Safari ≤ 14.1 对 text-orientation 的处理也偏保守，尤其在表单输入框或 contenteditable 区域中，竖排常失效。

• 生产环境若需兼容 IE，建议用 js 检测 css.supports('writing-mode', 'vertical-rl')，降级为单字 transform: rotate() + 绝对定位模拟
• 移动端 webkit（ios ≤ 15）中，input[type="text"] 内无法触发竖排，只能在外层容器控制，且软键盘弹出后布局易错位

竖排看着简单，实际牵扯流方向、字体渲染、布局上下文、浏览器实现差异四层逻辑。最容易被忽略的是：它改的不是“文字怎么转”，而是“整块内容怎么生长”。