中文竖排应选 writing-mode: vertical-rl，配合 text-orientation: mixed；vertical-lr 仅适用于蒙古文等特殊场景；sideways-rl 用于表头旋转且需注意浏览器兼容性。
writing-mode 的三个常用值怎么选
竖排文字的核心是 writing-mode，它不只有 vertical-rl 一种可用值。实际用时得看方向需求和浏览器兼容性：
-
vertical-rl：文字从上到下、行从右到左（中文传统竖排主流） -
vertical-lr：文字从上到下、行从左到右（日文/部分现代排版会用） -
sideways-rl：整行文字顺时针旋转90°，每个字仍保持正立（类似表格表头常见效果）
别直接套 vertical-rl 就完事——Firefox 对 sideways-rl 支持较晚（v64+），而 Safari 在某些嵌套场景下对 vertical-lr 的换行逻辑有偏差。
竖排时 text-orientation 怎么配合用
writing-mode 控制块级流向，text-orientation 决定单个字符的朝向。不设它，汉字能正常显示，但拉丁字母、数字、标点容易躺倒或反向：
-
text-orientation: mixed（默认）：汉字直立，英文字母/数字自动旋转90°，标点按上下文调整 -
text-orientation: upright：所有字符强制直立（适合纯中文+少量英文缩写场景） -
text-orientation: sideways：所有字符统一侧躺（基本不用，仅特殊视觉需求）
常见坑：mixed 下，括号、破折号、顿号等中文标点在 Chrome 和 Firefox 中渲染位置略有差异；若内容含大量英文术语（如 API 名、代码片段），upright 更可控。
立即学习“前端免费学习笔记（深入）”；
line-height 和 padding 在竖排下怎么调才不踩坑
竖排后，line-height 的“行”概念已变成垂直方向，所以数值含义不变，但视觉节奏变了——过大的 line-height 会让行距显得空洞，过小则字挨太近。关键点：
- 避免用
line-height: 1：竖排时字形高度 + 行距压缩后，上下字易粘连 -
padding的top/bottom变成左右留白，left/right变成上下留白——这点极易混淆 - 如果容器设置了
height，竖排内容可能溢出，建议优先用min-height或让高度由内容撑开
示例：
.vert-text { writing-mode: vertical-rl; text-orientation: upright; line-height: 1.4; padding: 0 1em; } 这里 padding: 0 1em 实际是「上下不留白，左右各留 1em」。
IE 兼容和 flex/grid 布局下的冲突
IE11 支持 writing-mode: tb-rl（旧语法），但不支持 vertical-rl 和 text-orientation。若必须兼容 IE，需加前缀并降级处理：
- 用
writing-mode: tb-rl替代vertical-rl（仅 IE11） - IE 下
text-orientation完全无效，只能靠字体或 SVG 替代特殊字符 - 更隐蔽的问题：当竖排元素是
display: flex子项时，Chrome/Firefox 对align-items的解析会错乱（比如设了align-items: center，结果文字贴顶）；此时建议外层用grid或包裹一层div隔离
竖排不是加个 CSS 就完事，它会重新定义盒模型的方向语义。哪怕只改一个属性，也可能牵动行高、对齐、换行、甚至父容器的尺寸计算逻辑。
