writing-mode: vertical-rl 是实现 HTML 竖排中文的唯一标准方案，需配合 text-orientation: mixed，并注意容器 display、布局模式及 white-space 设置，避免使用 br 换行。
writing-mode 是实现 HTML 竖排文字的唯一标准方案，其他“用 CSS 旋转”或“拆字 + flex 排列”都是权宜之计，不支持文本选择、复制、屏幕阅读器，且破坏语义。
竖排中文必须用 writing-mode: vertical-rl
这是目前唯一能正确处理中日韩文字竖排逻辑的标准值：
-
vertical-rl表示文字从上到下、行从右到左排列（符合传统中文/日文排版） -
vertical-lr是从上到下、行从左到右——仅适合蒙古文等少数语言，中文慎用 -
horizontal-tb（默认）不是竖排，别误选 - 注意：
text-orientation需配合控制单字朝向，中文建议设为mixed（数字、拉丁字母自动旋转90°，汉字保持 upright）
示例：
<div style="writing-mode: vertical-rl; text-orientation: mixed;"> 你好世界 123 ABC </div>
writing-mode 不生效？检查这三件事
常见失效不是语法错，而是被其他规则覆盖或容器限制：
立即学习“前端免费学习笔记（深入）”；
- 父容器设置了
display: inline或inline-block→ 改成block或inline-flex（inline元素不支持writing-mode） - 用了
float或position: absolute→ 这些会触发旧式布局模式，writing-mode可能被忽略 - 浏览器兼容性：IE11 仅支持
-ms-writing-mode（值为tb-rl），且不支持text-orientation；现代项目可直接忽略 IE
竖排 + 段落换行？别用 <br>，用 white-space
竖排时 <br> 会破坏行内流，导致换行位置异常。正确做法是靠 CSS 控制换行行为：
-
white-space: normal（默认）：允许在空格、标点处折行，适合长段落 -
white-space: pre-line：保留换行符（\n），但合并多余空格，适合手动分段的文案 - 避免
white-space: nowrap—— 它会强制单行，竖排下文字直接溢出容器 - 注意：CSS 中的
line-height在竖排中作用方向不变（仍是行间距），但单位建议用无单位数值（如1.5），避免 px 值在不同字号下失衡
移动端竖排要额外加 text-combine-upright 吗？
不需要，也别乱加。这个属性只用于「把多个短字符（如数字、字母）水平压缩进一个竖排字符宽度」，典型场景是年份 2024 显示为一列小字：
- 纯中文段落完全不用它
- 只对 2–4 个连续 ASCII 字符有效，超过长度会被忽略
- 需配合
font-variant-east-asian: proportional-width或full-width才能稳定渲染 - iOS Safari 对
text-combine-upright支持极差（直到 iOS 16.4 才部分支持），Android Chrome 较稳，但优先级远低于writing-mode
真正容易被忽略的是：竖排容器的 height 和 width 含义会互换——原本设 width: 200px 控制横向空间，竖排后它实际控制的是“行高方向”的可用高度。这点在响应式布局里经常翻车。
