text-orientation不能直接用于表格单元格，必须配合writing-mode: vertical-rl或vertical-lr才生效；中英文混排列头推荐mixed值，使汉字直立、ascii字符旋转90°，并需包裹div、设height及真机验证safari渲染差异。
text-orientation 不能直接用于 <table> 或单元格（<code><td>/<code><th>）内文字的“竖排方向控制”——它只对已处于垂直书写流中的文本生效，而表格默认是水平流，单独加 <code>text-orientation 完全无效。
为什么给 加 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 类型（<code>table、table-cell）会重置或限制 writing-mode 行为
真正能用 text-orientation 的表格单元格写法
必须把单元格内容包裹进一个块级容器（如 <div>），并显式覆盖其 display 和 writing-mode：
<ul><li>给 <code><td> 设 <code>display: block（或 display: table-cell 不支持 writing-mode，必须改）
- 内部
<div class="vert">文字</div> 才设 writing-mode: vertical-rl; text-orientation: mixed;
- 必须指定
height 或 min-height，否则垂直流下内容高度坍缩
- 避免用
<th> 直接设样式——部分浏览器对表头的 writing-mode 支持更弱
<p>示例：</p>
<pre class="brush:php;toolbar:false;"><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;
}</pre>
<h3>中英文混排表格列头推荐值是 mixed，不是 upright</h3>
<p>表格列头常含“编号”“状态”“时间”等混合内容，<code>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 实机打开页面，逐个检查列头是否换行正确、基线是否对齐、旋转字符是否截断
最麻烦的不是写错属性，而是混合文本在不同渲染引擎里“看起来差不多，细看全不对”。
浏览器会静默忽略该声明：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 类型（<code>table、table-cell）会重置或限制 writing-mode 行为真正能用 text-orientation 的表格单元格写法
必须把单元格内容包裹进一个块级容器（如
<div>），并显式覆盖其 display 和 writing-mode： <ul><li>给 <code><td> 设 <code>display: block（或display: table-cell不支持writing-mode，必须改） - 内部
<div class="vert">文字</div>才设writing-mode: vertical-rl; text-orientation: mixed; - 必须指定
height或min-height，否则垂直流下内容高度坍缩 - 避免用
<th> 直接设样式——部分浏览器对表头的 writing-mode 支持更弱 <p>示例：</p> <pre class="brush:php;toolbar:false;"><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; }</pre> <h3>中英文混排表格列头推荐值是 mixed，不是 upright</h3> <p>表格列头常含“编号”“状态”“时间”等混合内容，<code>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 实机打开页面，逐个检查列头是否换行正确、基线是否对齐、旋转字符是否截断
最麻烦的不是写错属性，而是混合文本在不同渲染引擎里“看起来差不多，细看全不对”。
-
