vertical-rl使文字从上到下、从右到左排列，汉字直立且标点换行符合东亚规范；sideways-lr将整行作为块顺时针旋转90°，西文字母数字保持原始朝向不形变，适用于混合排版表头等场景。
vertical-rl 和 sideways-lr 有什么区别
用 writing-mode 实现竖排，最常混淆的是这两个值：vertical-rl 和 sideways-lr。前者让文字从上到下、从右到左排列，汉字默认就是这个方向；后者则把整行文字当做一个块，整体顺时针旋转 90°，英文和数字会变成“躺倒”状态，且字形不变形（比如 A 还是正的 A，不是侧着的）。
实际选哪个，取决于内容类型：
-
vertical-rl：适合纯中文/日文/韩文场景，标点、换行、对齐都按东亚竖排规范处理 -
sideways-lr：适合需要保持西文字母/数字原始朝向的混合排版，比如表格表头里塞了 “CPU Usage” 这种词 - 注意：
sideways-lr在 Safari 15.4 之前不支持，Firefox 直到 112 才完全支持，老版本 iOS Safari 会直接回退为横排
text-orientation 怎么配合 writing-mode 使用
writing-mode: vertical-rl 只控制行方向，单个字符是否旋转，由 text-orientation 决定。默认值是 mixed，意思是汉字直立、拉丁字母和数字自动顺时针转 90°——这正是传统中文竖排想要的效果。
但如果你发现英文单词被“拧”得难以识别，可以手动调整：
-
text-orientation: upright：所有字符都直立显示（英文字母不旋转），适合标题或强调字段 -
text-orientation: sideways：所有字符统一顺时针转 90°，适合纯西文竖排（如菜单项 “File → Edit → View”） - 注意：
text-orientation对sideways-lr无效，它只作用于vertical-*模式
为什么设置了 writing-mode 却没生效
常见失效原因不是属性写错，而是布局上下文干扰：
- 父容器用了
display: flex或display: grid，且未显式设置flex-direction或grid-auto-flow，会导致子元素的writing-mode被忽略 - 元素本身是内联元素（如
span），而writing-mode对内联元素的盒模型影响有限，建议包裹一层div并设为display: inline-block或block - 使用了
transform: rotate()覆盖了writing-mode的视觉效果，二者不要混用——writing-mode是语义化排版，transform是视觉伪造，后者无法正确支持选中、复制、屏幕阅读器 - 某些 CSS 重置库（如 normalize.css）会强制设置
writing-mode: horizontal-tb，检查 computed styles 确认最终值
竖排文本在响应式中怎么安全适配
竖排在小屏上极易溢出或挤压，不能只靠媒体查询切换 writing-mode：
- 优先用
@supports (writing-mode: vertical-rl)做特性检测，而不是依赖设备宽度判断 - 搭配
overflow: hidden和text-overflow: ellipsis时要注意：竖排下ellipsis默认出现在底部，需额外加direction: rtl或用line-clamp控制行数 - 如果内容来自 CMS 或用户输入，避免在竖排容器里放长 URL 或邮箱——它们不会自动断行，要用
word-break: break-all或overflow-wrap: break-word - 移动端 Safari 对
writing-mode的渲染有延迟，首次加载可能闪一下横排，可加transform: translateZ(0)强制 GPU 加速触发重绘
竖排不是加一行 CSS 就完事，字体选择、标点悬挂、行间距、甚至光标位置都会受牵连——尤其当你要支持编辑器、富文本或国际化时，writing-mode 只是起点。
