必须设置 table-layout: fixed、width 和 overflow-wrap 才能使 td 的 overflow 生效；数字过长需靠 overflow-wrap: break-word 主动拆分，ellipsis 需包裹 div 并设 white-space: nowrap、overflow: hidden、text-overflow: ellipsis。
overflow 对 <td> 无效，数字过长撑列不是字体问题，而是换行/截断策略缺失——必须组合 <code>table-layout: fixed、width 和 overflow-wrap 或 white-space 才能真正生效。
数字过长不换行？先确认 table-layout: fixed 是否启用
默认 table-layout: auto 下，浏览器会扫描所有单元格找最长数字（比如一串 20 位 UUID），然后把整列拉宽。此时你给 <td> 写的 <code>max-width、word-wrap 全部被忽略。
- 必须在
<table> 上显式设置：<code>style="table-layout: fixed; width: 100%;" - 配合
<col>或<td> 的 <code>width/max-width才能锁定列宽 - 如果父容器宽度不明确（比如 Flex 容器里），还要给
<table> 加 <code>min-width: 0，否则 Flex 默认的min-width: auto会锁死换行overflow-wrap: break-word比word-break: break-all更适合数字字段纯数字（如订单号、ID、时间戳）没有空格，
white-space: normal不会自动断开，必须靠overflow-wrap: break-word主动拆分。它优先保持语义完整性：只在数字串实在放不下时才断，不会把123456789强行切成123/456/789。- 写法：
<td style="overflow-wrap: break-word; width: 120px;">12345678901234567890</td> - 别用
word-break: break-all—— 它会在任意位置断，对可读性要求高的数字（如银行卡号、身份证号）极不友好 - 若数字带分隔符（如
123-456-7890），overflow-wrap会优先在-处折行，更自然
要省略号？得套
<div>，不能直接写在 <code><td> 上 <p><code>text-overflow: ellipsis在裸<td> 上基本不工作，尤其 Firefox 和 IE11 完全无视。原因很实际：单元格不是块级上下文，<code>overflow: hidden对它约束力极弱。- 正确写法：
<td style="width: 120px;"><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;">12345678901234567890</div></td> -
display: block是关键——让div成为真正受控的块容器 - 漏掉
width或max-width，ellipsis就没触发条件；漏掉white-space: nowrap，文字先换行，根本没“溢出”可裁
图片或内联元素混在数字旁边？它们不受
white-space控制如果单元格里除了数字还有图标、小图或
<span></span>，white-space: nowrap对它们完全无效。这些元素会按自身尺寸撑开列宽，导致前面的数字截断策略失效。- 图片必须加：
max-width: 100%; height: auto;，否则会突破td边界 - 内联元素（如
<span class="icon"></span>）建议统一设display: inline-block; vertical-align: middle;，再限制最大宽度 - 最稳妥做法：把整个内容包进一个
<div>，再统一施加 <code>white-space+overflow等样式，避免子项行为干扰数字本身不会“自动缩放”来适配宽度，
font-size是静态值，浏览器从不根据内容长度动态调整。所谓“数字太长看不清”，本质是换行没配对，而不是字号太大——先查table-layout和overflow-wrap，别急着调字体。
- 写法：
