text-align: justify 对中文表格单元格无效,需同时设置 text-justify: inter-character、lang="zh"(作用于 html 或最近块级父容器)及明确宽度(如 width/min-width),且仅现代浏览器支持。

text-align: justify 在 <td> 里写上也没用?不是你漏写了分号,是浏览器压根不给中文加间隙——得配 text-justify: inter-character 和 lang="zh" 才行。
为什么 text-align: justify 对表格里的中文没反应
浏览器只在空格、连字符这类 Unicode 断词符处插入拉伸间隙,而中文词与词之间没有天然分隔点。哪怕你给 <td> 加了 text-align: justify,它也只会把整段文字当一个“单词”贴左排,末行更是裸露左对齐。
- 单行文本永远不触发两端对齐,哪怕写了也白写
-
<table>上设text-align: justify完全无效——该属性不继承,必须显式作用于<td>或<th> - 混排英文时,英文部分会被拉伸,中文仍挤成一团
让中文在 <td> 里真正两端对齐的硬性条件
目前唯一稳定生效的组合是:text-align: justify + text-justify: inter-character + lang="zh",三者缺一不可,且有严格前提:
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
-
lang="zh"必须设在<html>标签上,或最近的块级父容器(比如<tr>或包裹<td>的<div>),否则 Safari 可能静默失效 - 单元格必须有明确宽度,例如
width: 240px或min-width: 150px;没设宽,justify 失去参照基准,直接退化为左对齐 - 内容长度至少能自然换行出 3 行以上,否则末行大概率还是左对齐
- 仅 Chrome 120+、Edge 120+、Firefox 110+、Safari 17.4+ 支持
text-justify: inter-character
<td> 两端对齐的正确写法示例
别套用普通段落的写法,表格单元格要更谨慎:
立即学习“前端免费学习笔记(深入)”;
<td lang="zh" style="text-align: justify; text-justify: inter-character; width: 240px;">北京市朝阳区建国路8号万豪酒店B座12层</td>
- 不能只靠 CSS 类统一控制——
lang="zh"是 HTML 属性,必须写在元素上或其可继承的祖先上 - 如果用类名批量控制,记得同时在对应
<tr>或<tbody>上加lang="zh" - 若内容太短(比如就一行地址),即使满足所有条件,末行仍可能左对齐;这时不如改用左对齐+适当 padding 或 text-indent 控制视觉节奏
最容易被忽略的是 lang="zh" 的作用域和浏览器支持版本——不是所有用户都用最新版 Chrome,上线前得查目标环境是否覆盖;另外,表格列宽动态变化时,width 改成 min-width 更稳妥,但也要防过窄导致单字换行破坏阅读流。


















