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"]内无法触发竖排，只能在外层容器控制，且软键盘弹出后布局易错位
竖排看着简单，实际牵扯流方向、字体渲染、布局上下文、浏览器实现差异四层逻辑。最容易被忽略的是：它改的不是“文字怎么转”，而是“整块内容怎么生长”。
