text-align: justify对中文无效，因浏览器仅在空格等断点处拉伸，中文无天然断点；需配合text-justify: inter-character（现代浏览器）或::after伪元素（content: "\00A0"; display: inline-block; width: 100%）实现字级两端对齐。
为什么只写 text-align: justify 没反应
不是你漏写了分号，是浏览器根本没触发拉伸逻辑。中文没有空格断点，text-align: justify 默认只在英文单词间加空隙，对连续汉字直接跳过——哪怕你写了十遍，渲染结果和 text-align: left 几乎一样。它只对「有换行机会的多行文本」起作用：单行、容器太窄、字数太少（比如 3 个字），都会被判定为“无需拉伸”，末行更会无条件左对齐。
::after 伪元素补位的关键写法
核心思路是“骗”浏览器：让它以为段落还没结束，从而把最后一行也当作普通行处理。最稳妥的写法是：
.text-justify::after {
content: "\00A0";
display: inline-block;
width: 100%;
}
-
\00A0是不间断空格，比零宽空格\200B更稳定，不会被复制粘贴带出异常字符 - 必须用
inline-block，block会强制换行破坏行内流 -
width: 100%是关键，它让伪元素占据整行宽度，触发 justify 的拉伸计算 - 不要加
height或line-height，否则可能撑高行高或导致文字上浮
哪些地方容易踩坑
这个 hack 看似简单，但实际项目里高频翻车点很集中：
- 父容器没设明确宽度（如
width或max-width），响应式下伪元素失效或拉伸失控 - 段落末尾带隐藏字符：CMS 输出的全角空格、富文本插入的
\n，都会干扰“最后一行”的识别 - 在
flex容器里直接套用：子元素未设width: 100%时，text-align失效；应优先用justify-content: space-between替代 - 对短文本（如按钮文字、表单项标签）硬套，字间距被强行撑开，字形畸变，可读性反而下降
要不要加 text-justify: inter-character
可以加，但别依赖它作为主力方案。这个属性才是让中文真正按“字级”拉伸的核心，但它只在 Chrome 120+、Firefox 110+、Safari 17.4+ 支持；iOS Safari 16.x 及更早版本完全忽略。如果你的目标环境包含老版 WebView 或企业内网 IE 兼容模式，::after 仍是唯一可靠路径。加的话，必须成对出现：
立即学习“前端免费学习笔记（深入）”；
.text-justify {
text-align: justify;
text-justify: inter-character;
}
注意：text-justify 不继承，子元素需显式设置或用 inherit；且它不影响伪元素补位逻辑，两者可共存，但不能互相替代。
