现代css竖排应直接用writing-mode，优先选vertical-rl配text-orientation: upright；中英混排需text-orientation: mixed但注意浏览器差异；line-height与padding方向反转，须调整取值逻辑；表格竖排首列需固定宽高并禁折行。
直接用 writing-mode，别 rotate、别 JS 计算、别靠伪元素硬撑——现代浏览器全支持，关键是怎么选值、怎么配 text-orientation、怎么调间距。
vertical-rl 还是 vertical-lr？看阅读顺序和内容语种
中文传统竖排（古籍、侧边标题、书法展示）用 vertical-rl：文字从上到下，行从右向左推进，符合“右起、上至下”习惯；日文部分现代排版或需左起竖排时才用 vertical-lr；vertical-lr 在 Safari 中对换行处理偶有偏差，尤其嵌套 flex 或 grid 容器时容易断行错位。
常见错误现象：vertical-rl 下英文单词被拆成单字堆叠、标点位置反常（如括号朝向错误），本质是没配 text-orientation。
- 纯中文 + 少量英文缩写（如 API、UI）→ 优先
text-orientation: upright - 中英混排且英文需可读（如“HTML5 入门”）→ 必须加
text-orientation: mixed - 蒙古文等从左起竖排语言 → 才真正需要
vertical-lr
text-orientation: mixed 渲染不一致？标点和数字是关键
mixed 是默认值，但它在 Chrome 和 Firefox 中对中文标点（顿号、破折号、全角括号）的定位逻辑不同：Chrome 倾向按字符基线对齐，Firefox 更依赖字体内置度量。结果就是同一段文字，在两个浏览器里“、”或“（）”上下偏移几像素。
实操建议：
- 若内容含大量英文术语或代码片段（如
fetch()、JSON.parse），改用text-orientation: upright，所有字符强制直立，避免字母躺倒 - 避免依赖
sideways-rl：它让整行顺时针转 90°，但 Firefox 直到 v64+ 才支持，Safari 对嵌套场景兼容性差，且无法单独控制字符朝向 - 测试时务必打开 DevTools 的“Rendering”面板，勾选 “Show paint rectangles”，观察标点是否触发额外重绘
line-height 和 padding 在竖排下完全反过来了
line-height 数值含义不变，但“行”的物理方向已变成垂直，所以 line-height: 1 容易导致上下字粘连——竖排汉字字形高度 + 默认行距压缩后，视觉上几乎贴在一起。
padding 更容易踩坑：padding-top 和 padding-bottom 变成左右留白，padding-left 和 padding-right 变成上下留白。如果容器设了固定 height，竖排内容极易溢出。
- 竖排容器优先用
min-height，让高度由内容自然撑开 -
line-height推荐用无单位数值（如1.3），避免固定像素值在缩放时失真 - 调试时临时加
border: 1px solid red，一眼看清 padding 方向是否反了
表格首列竖排为什么总对不齐？尺寸必须锁死
直接给 <th> 加 <code>writing-mode: vertical-rl，结果文字堆在右上角、表头宽度塌陷、鼠标 hover 区域错位——根本原因是浏览器无法自动推算竖排后的“行宽”。
稳定做法：
- 只作用于首列：
th:first-child, td:first-child - 必须设固定
width（如width: 32px）和min-height（如min-height: 80px） - 搭配
white-space: nowrap，防止中文单字被意外折行 - 响应式场景下，
table-layout: fixed+<col width="32">比 CSS 更可靠
真正难的不是让字竖起来，而是让它们在各种字体、各种缩放、各种嵌套布局里，始终对齐、不溢出、不模糊——这些细节在 writing-mode 后面藏着，不测不知道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
