writing-mode: vertical-rl是中文竖排唯一正确方案，因其严格匹配“从上到下、从右到左”传统阅读流；vertical-lr仅适用于蒙古文，transform旋转会破坏可访问性与文本选择。
writing-mode 是实现竖排文字最直接、最标准的方式，现代浏览器（Chrome 48+、Firefox 41+、Safari 12.1+、Edge 12+、IE11）都支持，无需 JavaScript 或 hack。
vertical-rl 和 vertical-lr 的区别与选择
中文传统竖排用 vertical-rl，日文也常用；vertical-lr 主要用于蒙古文等从左向右书写的竖排语言。两者都会让文本流从上到下，但行序方向相反：
-
vertical-rl：每行从右往左排列（第一行在最右，第二行在其左），符合古籍排版习惯 -
vertical-lr：每行从左往右排列（第一行在最左），视觉上像“镜像竖排” - 字符默认保持正立（不旋转），若需全部字符顺时针转90°，需配合
text-orientation: upright
必须设置 height 或 inline-size 才能看见效果
writing-mode 改变的是文本流方向，不是单纯旋转元素。容器若无明确高度或块尺寸，会塌陷成一行高度，导致文字挤成一横条甚至不可见：
- 对块级元素（如
<div>），必须设height或inline-size（推荐后者，语义更准确） - 对内联元素（如
<span>），需先设display: inline-block或block，再设尺寸 - 示例：
.vertical-text { writing-mode: vertical-rl; inline-size: 2em; line-height: 1.5; }
IE11 兼容性处理不能只靠 -ms-writing-mode
IE11 只识别旧语法 -ms-writing-mode: tb-rl（注意不是 vertical-rl），但它不支持 text-orientation，且对 Unicode 字符（如 emoji、标点）渲染异常：
立即学习“前端免费学习笔记（深入）”；
- 加前缀只是基础兼容，实际项目中建议用
@supports做渐进增强 - 避免在 IE11 中依赖
text-orientation: mixed，它会被忽略，所有汉字会强制旋转 - 若必须支持 IE11，考虑降级为横向排版 + CSS transform 旋转，但会破坏可访问性和文本选择
真正容易被忽略的不是语法本身，而是容器尺寸控制和字符朝向的组合逻辑——writing-mode 定义流向，text-orientation 控制单字方向，inline-size/block-size 决定空间分配，三者缺一不可。
