使用 writing-mode: vertical-lr 和 text-orientation: upright 可优雅实现表头文字垂直排列，无需手动插入 <br>，兼容现代浏览器且语义清晰、维护性强。
使用 `writing-mode: vertical-lr` 和 `text-orientation: upright` 可优雅实现表头文字垂直排列，无需手动插入 `
`，兼容现代浏览器且语义清晰、维护性强。
在 HTML 表格中，若需将表头（<th>）内容垂直显示——即每个字符独占一行（如 “MATH 101” 变为纵向排列的 M→A→T→H→空格→1→0→1），传统做法常依赖 <br> 拆分，但这破坏语义、增加冗余标记，且难以响应式调整。CSS 提供了更规范、可维护的解决方案。
核心方案是组合使用两个标准属性：
- writing-mode: vertical-lr：将文本流方向设为垂直从左到右（即文字自上而下排列，行内顺序仍为从左到右）；
- text-orientation: upright：强制所有字符正向直立显示（避免旋转90°，确保字母始终正面朝上，而非侧躺）。
✅ 完整示例代码如下：
<style>
th {
writing-mode: vertical-lr;
text-orientation: upright;
/* 可选：增强可读性 */
padding: 8px;
text-align: center;
border: 1px solid #ddd;
}
table {
border-collapse: collapse;
}
td {
padding: 8px;
border: 1px solid #ddd;
}
</style>
<table>
<tr>
<th>MATH 101</th>
<th>HIST 101</th>
<th>PHYS 101</th>
</tr>
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>B</td>
<td>B</td>
<td>B</td>
</tr>
</table>? 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 浏览器兼容性：writing-mode 和 text-orientation 在 Chrome 48+、Firefox 41+、Safari 14.1+、Edge 79+ 中原生支持；旧版 Safari 需加 -webkit-writing-mode 前缀（但 text-orientation 不支持，此时建议降级为 vertical-rl + text-orientation: mixed）；
- 空格与数字处理：upright 模式下，空格和数字均保持直立对齐，视觉效果自然；
- 单元格高度适配：垂直文本会自动撑高 <th>，建议配合 min-height 或 line-height 微调间距；
- 无障碍友好：相比 <br> 拆分，纯文本内容保留完整语义，屏幕阅读器可正常朗读“MATH 101”，提升可访问性。
总结：抛弃 <br> 硬换行，拥抱 CSS 逻辑书写模式——这不仅是样式优化，更是语义化与可维护性的双重升级。
