vertical-rl 下文字错位需配 text-orientation: upright 和 direction: rtl/ltr；vertical-lr/rl 区别在于内联起始边，影响换行与对齐；flex/grid 中需在子元素设 writing-mode，非容器；注意 safari/ios 兼容性及隐式属性变化。
writing-mode 改变文字方向但内容错位了怎么办
直接设 writing-mode: vertical-rl 后，文字是竖排了，但段落顺序反了、标点挤在右边、甚至中文从右往左读——这不是 bug，是 CSS 按东亚排版规范默认启用 text-orientation: mixed 和 direction: rtl 导致的。
常见错误现象：vertical-rl 下数字和拉丁字母倒着显示、冒号/括号跑到字左侧、多行文本上下颠倒。
- 中文竖排必须配
text-orientation: upright，否则英文字母会自动旋转 90° - 若希望从上到下、从右到左（传统古籍式），保留
direction: rtl；若要从上到下、从左到右（如现代日文杂志），加direction: ltr -
writing-mode影响块级布局流，父容器高度可能塌陷，记得检查height或min-height
vertical-lr 和 vertical-rl 的实际区别在哪
别光看名字里 “left” 和 “right” —— 它们决定的是**内联方向的起始边**，也就是新行从哪边开始。这个细节直接影响换行逻辑和对齐行为。
使用场景：做侧边栏标题时用 vertical-rl 更自然（文字从右向左堆叠，视觉上像贴在右侧）；做横屏表格的列头时，vertical-lr 更适合（文字从左向右堆叠，方便与表头对齐）。
-
vertical-rl：内联方向从右到左 → 新行出现在当前行的左边 -
vertical-lr：内联方向从左到右 → 新行出现在当前行的右边 - 两者在单行文本中看不出差别，一涉及
white-space: normal换行或text-align就立刻暴露 - Firefox 对
vertical-lr支持较晚（v104+），旧项目慎用
writing-mode 在 Flex/Grid 布局里失效了
不是失效，是被覆盖了。Flex 容器的 flex-direction 和 Grid 容器的 grid-template-rows/columns 会接管主轴方向，writing-mode 只影响其子元素的**文本流方向**，不改变 flex item 或 grid item 的排列逻辑。
典型表现：给 display: flex 的容器设 writing-mode: vertical-rl，子元素还是横着排；给 grid item 设了 writing-mode，但文字仍被 grid 轨道强行拉伸变形。
- 想让 flex 子项竖排文字，得在每个子项上单独加
writing-mode，而不是父容器 - Grid 中若需整列文字竖排，推荐对
grid-column内的div或span设置writing-mode+text-orientation -
writing-mode不改变justify-content或align-items的参照系，它们依然按原始块方向计算
IE 和 Safari 里 vertical-* 行为不一致
IE11 只支持 vertical-rl，且强制把 text-orientation 锁死为 mixed，无法 upright；Safari（尤其 iOS 15 之前）对 vertical-lr 的换行处理有偏差，常把空格当换行符。
兼容性影响：纯中文场景下 vertical-rl + text-orientation: upright 在所有现代浏览器都稳；一旦混入英文、数字或 emoji，iOS Safari 就容易出现字符截断或错行。
- 上线前务必在真机测 iOS Safari，模拟器不可靠
- 避免在
writing-mode元素内用word-break: break-all，它在 Safari 中会破坏竖排逻辑 - IE11 用户量低时，可直接用
@supports (writing-mode: vertical-rl)包裹样式，不降级
真正麻烦的不是写哪一行 CSS，而是排版逻辑切换后，line-height、letter-spacing、甚至 cursor 的行为都会悄悄变。尤其当文字要响应缩放或适配不同字号时，这些隐性依赖才浮出水面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
