text-align: justify 必须显式设置在 <td> 或 <th> 上才生效，因表格单元格不继承 <table> 的该属性；需配合 text-align-last: justify 修正末行对齐，中文推荐加 text-justify: inter-character（Chromium 支持）。
text-align: justify 能让表格单元格里的多行文本两端对齐，但必须单独作用于 <td> 或 <th>，设在 <table> 上无效。
为什么 text-align: justify 在表格里不生效
表格单元格默认不继承父级 text-align 值，哪怕你给 <table> 加了 text-align: justify，<td> 仍按左对齐渲染。这是 CSS 规范明确规定的：text-align 不会从 <table> 继承到单元格，必须显式设置在单元格级。
- 错误写法：
table { text-align: justify; }→ 对<td>无影响 - 正确写法：
td, th { text-align: justify; } - 注意：单行中文通常不触发两端对齐，因为浏览器默认只在空格/标点处分隔加间隙；多行文本才更可靠
text-align-last: justify 补齐最后一行
即使启用了 text-align: justify，最后一行仍默认左对齐——这不是 bug，是规范行为。要让它也两端对齐，必须加 text-align-last: justify。
- 仅对最后一行（或唯一一行）生效，配合
text-align: justify才完整 - Chrome/Edge 120+、Firefox 91+ 支持良好；Safari 15.4+ 有限支持；IE 完全不支持
- 示例：
td { text-align: justify; text-align-last: justify; } - 若需兼容旧浏览器，可考虑用
::after伪元素插入不可见字符强制换行，或用 JS 动态补空格（不推荐，维护成本高）
中文两端对齐效果差？试试 text-justify: inter-character
中文没有天然词间空格，text-align: justify 默认只在 Unicode 分隔符（如空格、标点）处拉伸，导致字间距不均、行尾突兀。Chrome/Edge 120+ 开始支持 text-justify: inter-character，强制按字符间均匀分配空白。
立即学习“前端免费学习笔记（深入）”；
- 必须与
text-align: justify同时使用，否则无效 - 当前仅 Chromium 内核主流支持，Firefox/Safari 尚未实现
- 安全写法：
td { text-align: justify; text-justify: inter-character; } - 不要依赖它做跨浏览器一致排版，建议作为增强项，而非基础方案
表格里别用 letter-spacing 模拟两端对齐
有人用 letter-spacing + 固定字数计算来“手动撑开”文本，比如 if(len($$$)=4,"<div style="letter-spacing:4px;">"+$$$+"</div>",...) ——这在报表工具（如 FineReport）里可行，但在纯 HTML/CSS 中极难维护。
- 字数一变，所有
letter-spacing值都要重调；字体大小、字号缩放、响应式断行都会破坏效果 - 无法适配不同语言（中英混排、日文、阿拉伯文），且无障碍阅读器会把额外空格读出来
- 真正需要精确控制的场景（如发票、凭证打印），应交由后端生成 PDF 或使用专用排版引擎，而非前端硬凑
最稳的路径就一条：给 <td> 和 <th> 显式设 text-align: justify，加 text-align-last: justify 补最后一行，再根据目标浏览器决定是否叠加 text-justify: inter-character。其它花招看着灵活，实际掉坑里出不来。
