text-align: justify 在表格单元格中对中文无效,需配合 text-justify: inter-character 和 lang="zh" 才能生效;必须设明确宽度、内容足够换行,且现代浏览器才支持。

text-align: justify 在表格单元格里基本没反应,不是你写错了,是浏览器默认不给汉字之间加间隙——必须组合 text-justify: inter-character 和 lang="zh" 才能生效。
为什么 text-align: justify 对表格里的中文无效
浏览器只在 Unicode 单词分隔符(比如空格、连字符)处插入拉伸间隙,而中文没有天然断点。所以哪怕你给 <td> 写了 <code>text-align: justify,它也只会把整段文字堆在左边,最后一行更是裸露左对齐。
- 单行文本永远不触发 justify 行为,哪怕写了也没用
- 单元格没设
width或min-width,justify 失去参照基准,直接退化为左对齐 -
text-align不会从<table> 继承,必须显式写在 <code><td> 或 <code><th> 上 <li>混排英文时,英文部分会被拉伸,中文部分仍挤成一团</li> <h3> <code>text-justify: inter-character的硬性前提条件这是目前最干净的解法,但 Chrome 120+、Edge 120+、Firefox 110+、Safari 17.4+ 才支持,且必须同时满足:
-
lang="zh"必须设在标签上,或最近的块级父容器(比如<tr> 或包裹 <code><td> 的 <code><div>),否则 Safari 可能静默失效 <li> <code>text-align: justify和text-justify: inter-character必须同时声明,缺一不可 - 单元格需有明确宽度,例如
width: 200px或min-width: 150px - 内容长度至少能自然换行出 3 行以上,否则末行仍可能左对齐
正确写法示例:
<td lang="zh" style="text-align: justify; text-justify: inter-character; width: 240px;">北京市朝阳区建国路8号万豪酒店B座12层</td>
兼容旧环境(如 iOS Safari 16–、旧版 Edge)的替代方案
这些环境不支持
text-justify: inter-character,强行使用会静默回退到左对齐。可用以下方式降级:- 用
text-align-last: justify缓解末行突兀感(注意:它只影响最后一行,且 iOS Safari 14.5+ 才支持) - 对固定结构内容(如“姓名:张三”),改用 flex 模拟:
<td style="display: flex; justify-content: space-between; width: 200px;">姓名张三</td>
- 慎用
letter-spacing模拟撑满,建议值控制在0.03em~0.06em;过大时标点后会出现明显空隙 - 避免
word-break: break-all,它会割裂词语,破坏语义;若需防溢出,优先用word-break: keep-all
表格中容易被忽略的细节陷阱
表格单元格的两端对齐比普通段落更脆弱——
<img>、图标字体、inline-block元素都会干扰行内流布局,导致 justify 失效。- 所有行内元素建议统一加
vertical-align: top,防止基线错位引发换行异常 - 不要在
<td> 上同时设 <code>overflow: hidden或text-overflow: ellipsis,它们会截断换行逻辑 - 如果单元格含多段文本(如带
<br>的地址),text-justify不起作用,应改用display: flex或手动拆分为多个<span></span> - 使用
@supports not (text-justify: inter-character)包裹降级样式,避免覆盖原生支持环境
-











