Bootstrap 中无需额外处理 writing-mode，直接使用即可，但需注意容器尺寸、表头高度及浏览器兼容性问题。
writing-mode 在 Bootstrap 中是否需要额外处理
不需要。Bootstrap 本身不干涉 writing-mode，它只是 CSS 属性，直接作用于元素即可生效。但要注意：Bootstrap 的排版类（如 .text-center、.fw-bold）和栅格系统（如 .col）仍可正常使用，前提是容器尺寸能容纳垂直文字——否则容易被截断或撑开布局。
vertical-rl 和 sideways-lr 的实际区别
这两个值在垂直文字场景中行为差异明显，选错会导致文字朝向异常或浏览器兼容问题：
-
writing-mode: vertical-rl：文字从上到下排列，行内方向从右到左（中文默认推荐），所有主流浏览器支持良好 -
writing-mode: sideways-lr：整行文字顺时针旋转 90°，字形保持水平朝向（像把横排文本整个立起来），仅 Chrome/Firefox 支持，Safari 目前不支持，且会破坏部分文本对齐逻辑
除非明确需要「横排旋转」效果（比如仪表盘侧边标签），否则优先用 vertical-rl。
配合 text-orientation 控制单字朝向
启用 writing-mode: vertical-rl 后，英文、数字、标点默认会自动旋转 90°，但中文汉字仍保持 upright（正立）。如果希望英文字母也保持正立（即和汉字方向一致），需加 text-orientation: upright：
立即学习“前端免费学习笔记（深入）”；
<div style="writing-mode: vertical-rl; text-orientation: upright;"> 垂直文字 ABC123 </div>
注意：text-orientation: upright 在 Safari 中支持不稳定，部分版本会忽略；若需强兼容，建议用 transform: rotate(90deg) 替代，但此时需手动调整 height/white-space 防止换行错乱。
在 Bootstrap 表格中让表头文字垂直显示
表格单元格（<th> 或 <td>）应用 writing-mode 时，容易出现高度塌陷或内容溢出，尤其当使用 .table-sm 或自定义 padding 时：
- 必须显式设置
height或min-height，否则vertical-rl下单元格高度可能趋近于 0 - 避免依赖
.text-center水平居中——它对垂直文字无效；改用text-align: center+vertical-align: middle - 如果表头含图标（如
<i class="bi bi-arrow-up"></i>），图标不会随文字旋转，需单独加transform: rotate(90deg)
常见错误是只写 style="writing-mode: vertical-rl" 就以为完事，结果表头看不见文字——八成是高度没撑开。
垂直文字真正的麻烦不在写法，而在它和周围布局的耦合：行高、盒模型、父容器 overflow、甚至 print 媒体查询里的表现都可能突变。动手前先在最小 HTML 片段里验证，别直接塞进复杂 Bootstrap 组件里调试。
