writing-mode: vertical-rl 是实现中文竖排最直接、语义化的方式，它真正改变文本流方向，使文字从上到下、行从右向左排列，自动处理标点、字符朝向与盒模型逻辑，需配合 text-orientation、显式尺寸及 overflow-y 控制以确保完整可用。
writing-mode 是实现坚排（竖排）文本最直接、最语义化的方式，不是靠 transform 旋转容器，也不依赖 JS 计算。只要浏览器支持（Chrome 48+、Firefox 41+、Safari 9+、Edge 12+），一行声明就能让文字真正按垂直流布局渲染。
vertical-rl 是中文坚排的默认选择
中文古籍、出版物和多数网页坚排需求，都要求文字从上到下排列，行与行之间从右向左堆叠——这正是 vertical-rl 的行为：
-
vertical-rl中，“rl” 指块级流向（block flow）为 right → left，“vertical” 指内联流向（inline flow）为 top → bottom - 它会系统性切换盒模型逻辑方向：原来
width控制水平尺寸，现在控制的是“逻辑高度”（即竖排容器的高度感）；height则变成“逻辑宽度”（影响每行能容纳多少字） - 标点符号、空格、换行符均按坚排规则自动对齐，比如句号落在字右侧（而非下方），这是
transform无法模拟的 - 必须显式设置容器尺寸（如
height: 300px），否则内容可能塌缩成一条线——因为块级流方向变了，height实际成了“每行宽度”
text-orientation 控制单个字符朝向
坚排时英文、数字、阿拉伯数字默认“横躺”（text-orientation: mixed），但有些场景需要它们正立显示（如标题中的英文缩写、年份）。这时要用 text-orientation：
-
text-orientation: upright：强制所有字符旋转 90° 正立，适用于“2025”“PDF”“API”等短词 -
text-orientation: sideways：让所有字符统一横躺（少见，多用于全西文坚排） - 注意：
text-orientation不继承，需作用于具体文本容器（如span或p），且在vertical-rl下才生效 - 别对整段中文设
upright——汉字本身是方块字，正立反而导致字序错乱
滚动条和溢出处理容易被忽略
启用 writing-mode: vertical-rl 后，主轴变为垂直方向，但溢出行为不会自动“聪明地翻转”：
- 内容超长时，默认触发
overflow-x: auto（横向滚动条），而不是你期待的纵向滚动——因为此时“长”体现在逻辑水平方向（即原来的width方向） - 解决办法：显式设
overflow-y: auto并配合height限制容器可视区域；或用overflow: auto+max-height更稳妥 - 如果容器内有图片、
input等替换元素，它们默认仍按水平流渲染，可能错位或拉伸。需单独对其设writing-mode: vertical-rl或用display: block+margin手动调整 - 第三方 UI 组件（如 Ant Design 的
Tooltip、Popover）通常不兼容坚排流，弹出层仍按水平坐标计算，需额外 patch 或禁用
兼容性补丁只在必要时加
现代项目基本无需前缀，但若需支持 IE11 或旧版 Safari，可加有限回退：
-
-webkit-writing-mode: vertical-rl（Safari ≤ 8、iOS ≤ 8） -
-ms-writing-mode: tb-rl（IE10–11；注意值不同，tb-rl对应vertical-rl） - 不要盲目加全部前缀——
moz和o前缀从未被任何 Firefox/Opera 版本支持过 - 可以用
@supports (writing-mode: vertical-rl)包裹坚排样式，避免低版本浏览器解析异常
真正难的不是让字竖起来，而是让整个布局流、交互反馈、第三方组件都跟着逻辑方向对齐。一个没设 height 的容器、一段没加 text-orientation 的英文、一个没处理溢出的滚动区——都可能让坚排效果在视觉或交互上“掉链子”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
