text-align: justify 要生效需满足三条件:容器有明确宽度、文本足够长能换行、中文需加 text-justify: inter-character;单行、窄容器或无分词时无效。

text-align: justify 能让多段落左右两端对齐,但**不是设了就生效**——它只在满足特定条件时才真正拉伸文字间距。
为什么 p 加了 text-align: justify 没变化?
常见现象是:单行段落、窄容器、中文文本全都不动。根本原因有三个:
-
p是块级元素(默认满足) - 容器必须有明确宽度(比如
width: 600px或父容器是定宽 flex 项),否则“两端”无参照 - 文本得足够长、能自然换行——单行文本永远不拉伸,justify 对它无效
例如:<p style="text-align: justify">你好</p> 看不出效果,不是写错了,是它压根没第二行可对齐。
中文段落怎么让 text-align: justify 真正起作用?
Chrome/Edge 默认只在空格、连字符等“词界”处插入间隙,而中文没有天然分词,所以字符间不加空隙,整段看起来和 left 一样。
立即学习“前端免费学习笔记(深入)”;
- 加
text-justify: inter-character:强制在每个汉字间插入可伸缩空白,对中文最直接有效 - 注意兼容性:仅 Chromium 120+ 支持;Firefox 128 忽略;Safari 完全不支持
- 稳妥写法是同时写:
text-align: justify; text-justify: inter-character;,现代浏览器立刻见效,老浏览器退回到基础 justify 行为
最后一行怎么也撑满?别只靠 text-align-last: justify
text-align-last: justify 必须和 text-align: justify 联用,且只对多行文本的最后一行生效——单行、没换行、没启用 justify,它就完全不工作。
- 它在 Chrome/Edge/Firefox 都支持,Safari 16.4+ 开始支持,但 iOS Safari 15.4 前不支持
- 别对短段落强行用它:比如两行文本,第二行只有两个字,拉伸后字距夸张,反而难看
- 更可控的办法是手动干预断行点,比如在合适位置插入
<wbr>,或用零宽空格增加换行机会
别踩这些坑
align 属性在 HTML5 中已废弃,<p align="justify"> 在所有现代浏览器里都无效,必须用 CSS。
-
text-align控制的是段落内部文字对齐,不是p自身在页面中的位置(那得靠margin、flex或grid) - 大量启用
text-justify: inter-character可能轻微影响渲染性能,尤其移动端长文,建议只在关键排版区域启用,不要全局设在body或p上 - 表格单元格内两端对齐,推荐统一写:
table td, table th { text-align: justify; text-align-last: justify; word-break: keep-all; }



















