text-orientation不能直接用于表格单元格，必须配合writing-mode: vertical-rl或vertical-lr才生效；中英文混排列头推荐mixed值，使汉字直立、ASCII字符旋转90°，并需包裹div、设height及真机验证Safari渲染差异。
text-orientation 不能直接用于 <table> 或单元格（<td>/<th>）内文字的“竖排方向控制”——它只对已处于垂直书写流中的文本生效，而表格默认是水平流，单独加 text-orientation 完全无效。
为什么给 <td> 加 text-orientation: mixed 没反应
浏览器会静默忽略该声明：text-orientation 必须配合 writing-mode: vertical-rl 或 vertical-lr 才起作用。表格单元格默认 writing-mode: horizontal-tb，此时设 text-orientation 就像给汽车方向盘装在自行车上——语法合法，但无上下文支撑。
- DevTools 中该 CSS 声明显示为灰色删除线，控制台不报错，但文字照常横排
- 常见错误是直接写
td { text-orientation: mixed; }，忘了加writing-mode - 即使加了
writing-mode，表格布局本身会干扰垂直流：<table>的 display 类型（table、table-cell）会重置或限制 writing-mode 行为
真正能用 text-orientation 的表格单元格写法
必须把单元格内容包裹进一个块级容器（如 <div>），并显式覆盖其 display 和 writing-mode：
- 给
<td>设display: block（或display: table-cell不支持writing-mode，必须改） - 内部
<div class="vert">文字</div>才设writing-mode: vertical-rl; text-orientation: mixed; - 必须指定
height或min-height，否则垂直流下内容高度坍缩 - 避免用
<th>直接设样式——部分浏览器对表头的 writing-mode 支持更弱
示例：
立即学习“前端免费学习笔记（深入）”；
<td>
<div class="vert">标题文字</div>
</td>
.vert {
writing-mode: vertical-rl;
text-orientation: mixed;
height: 120px;
line-height: 1.4;
font-family: "Noto Serif CJK SC", sans-serif;
}
中英文混排表格列头推荐值是 mixed，不是 upright
表格列头常含“编号”“状态”“时间”等混合内容，text-orientation: upright 会导致：
-
2026-07-07变成七行堆叠，日期完全不可读 -
Status: OK中冒号和空格错位，OK字母上下分离 - 括号
(详情)的左右括号方向不一致，视觉断裂 - 所有标点（句号、逗号、斜杠）位置异常，破坏阅读节奏
只有纯中文列名（如“姓名”“部门”）且无数字/符号时，upright 才勉强可用；日常表格一律用 mixed。
真机验证 Safari 是绕不开的坎
截至 2026 年 7 月，iOS Safari 对 text-orientation 在表格嵌套场景下的支持仍不稳定：
- 断行位置可能比 Chrome 多出一空行，尤其在带
white-space: nowrap的单元格里 - 标点悬挂（如句号悬于行外）在 Safari 真机上常失效，桌面模拟器看不出来
- 字体微调（如
font-feature-settings: "vrt2"）在 Safari 中被忽略 - 必须用 iPhone 实机打开页面，逐个检查列头是否换行正确、基线是否对齐、旋转字符是否截断
最麻烦的不是写错属性，而是混合文本在不同渲染引擎里“看起来差不多，细看全不对”。
