text-combine-upright在table单元格中无效，因其仅作用于内联元素，需将文本包裹在等内联标签内并设样式；同时须配合writing-mode: vertical-rl、固定宽度、支持合字的字体及-webkit-前缀方可生效。
text-combine-upright 在 table 单元格里为什么没反应
直接给 <td> 或 <code><th> 加 <code>text-combine-upright: all 无效——该属性只对「内联级内容」起作用，而表格单元格默认是 display: table-cell，浏览器不会在该上下文中触发字符合并逻辑。
必须把要压缩的文本包裹进一个内联元素（比如 <span></span>），再对该 <span></span> 设置样式。否则即使写了 writing-mode: vertical-rl，text-combine-upright 也会被忽略。
- 错误写法：
<td class="vertical-num">2024</td>（样式加在<td> 上） <li>正确写法：<code><td><span class="tcu">2024</span></td>（样式加在<span></span>上） - 还要注意：父容器不能有
white-space: nowrap或overflow: hidden等干扰换行判定的设置，否则连续字符判断会失败 - 确保目标文本是纯连续字符串，例如用
<span>20240716</span>，不要写成<span>2024-07-16</span>（连字符会打断） - 避免在数字前后加
<em></em>、<strong></strong>等内联标签，它们会破坏“连续字符”语义 - 如果必须混排，比如
USD 123，可手动拆解：<span class="tcu">USD</span><span class="tcu">123</span>，分别压，视觉上靠得近就行 -
text-combine-upright压缩效果依赖固定宽度约束，width: auto的单元格无法触发 - 推荐给
<col>显式设宽度，例如<col style="width: 2em">（2em 是常见压缩后宽度） - 字体影响极大：系统默认字体（如
system-ui）通常不支持 CJK 合字特性，必须指定如"Noto Sans CJK SC"或"PingFang SC" - Safari 需同时写
-webkit-text-combine-upright: all，否则即使其他条件满足也白搭 - 基础层：用
text-orientation: upright让数字直立不旋转，至少可读 - 增强层：加
text-combine-upright: all，现代浏览器自动生效，老浏览器静默忽略 - 兜底层：对 iOS Safari 等，用
transform: rotate(-90deg)+display: inline-block模拟压缩感（需配合固定宽高和text-align: center） - 极端情况（如票据类 UI）：放弃 CSS，改用 SVG
<text></text>定位每个数字，完全可控但开发成本高
竖排表格表头里数字+西文混排怎么压成一格
text-combine-upright: all 只能合并「连续且无中断」的字符序列。一旦中间夹了中文标点（如 第、年、月）、空格或 HTML 实体（如 ），就会断开合并——比如 NO.123 能压，但 NO. 123（带空格）或 NO．123（全角点）就只能压 123 部分。
实操建议：
table-layout: fixed 下 text-combine-upright 失效的常见原因
当表格用了 table-layout: fixed，列宽由 <col> 或第一行单元格宽度决定，此时若列宽不够容纳「压缩后单字宽度」（约 1em），浏览器会退回到逐字竖排，甚至换行——不是属性失效，而是空间不足导致 fallback。
关键点：
兼容性差时表格里怎么让数字看起来像压在一起
别死磕 text-combine-upright。它在 Safari 17.5 之前基本不可靠，Edge 110+ 才开始稳定支持，Firefox 对 digits 类值始终不认——真正在生产环境跑通的只有 Chrome 90+ 和最新 Firefox。
务实 fallback 方案：
真正卡住的往往不是语法，而是字体合字支持、连续字符判定、以及表格布局模型对内联压缩的容忍度——这三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
