text-align: justify 最后一行左对齐是规范行为而非 bug；必须多行才生效，单行被忽略；中文需配 text-justify: inter-character 或 ::after 伪元素兜底。
text-align: justify 为何最后一行永远左对齐
这不是 bug，是 CSS 规范明确规定的默认行为：浏览器只对「非末行」执行拉伸，末行强制左对齐。哪怕你写了 text-align: justify，只要它被识别为段落的最后一行，就不会参与字间距分配。
常见错误现象：<p style="text-align: justify;">这是一段中文文本</p> 渲染后末行明显缩进，整段像被截断了一样；或者在 flex 容器里加了 justify 却完全没反应——因为根本没触发多行判定。
- 必须确保文本实际换行（至少两行），单行文本
text-align: justify直接被忽略 - 末尾带换行符、空格或未闭合的内联标签（如
<span>文字</p>）会干扰浏览器对“行尾”的识别 -
text-align-last: justify不是独立开关，必须和text-align: justify同时存在才可能生效；但中文场景下，Chrome/Firefox 基本无视它，Safari 16.x 及更早版本直接不支持
现代浏览器中真正起效的组合：text-justify: inter-character
Chrome 120+、Firefox 110+、Safari 17.4+ 支持 text-justify: inter-character，这是目前唯一语义正确、无需 hack 的方案——它告诉浏览器：在每个字符之间都允许插入弹性间距，包括汉字。
但注意：text-justify 不继承，子元素要显式设置；且必须和 text-align: justify 配对使用，缺一不可。
立即学习“前端免费学习笔记（深入）”；
- 写法必须是：
text-align: justify; text-justify: inter-character; - 别填
inter-word或distribute——对中文无效，纯属白写 - 父容器需有明确宽度（比如设了
width，或处于块级上下文中），否则浏览器无法计算拉伸余量
兼容旧版 Safari（iOS 16 及更早）的兜底方案：::after 伪元素
当 text-justify 不可用，或需要覆盖 iOS 15.4 之前版本时，::after 是最稳妥的 fallback。它的原理是“骗”浏览器：让末行以为自己不是最后一行。
示例代码：
.justify-fallback {
text-align: justify;
}
.justify-fallback::after {
content: "";
display: inline-block;
width: 100%;
}
- 这个
::after不占视觉空间，但参与行高与对齐计算 - 比插入零宽空格
更安全——后者复制粘贴时可能带出异常字符，且影响屏幕阅读器 - 不要在 flex 容器中直接对子元素用此方案，先确保该子元素已设
width: 100%或flex: 1，否则伪元素无处撑开
移动端和混排场景下容易被忽略的细节
小屏宽度下，justify 拉伸极易导致字距过大、文字发散甚至重叠；中英文混排时，长英文单词或连续拼音串会破坏对齐节奏，而 URL 更是直接让 justify 放弃治疗。
- 加媒体查询降级：
@media (max-width: 480px) { .justify-cn { text-align: left; } } - 英文部分建议配
hyphens: auto（需lang="en"）和word-break: break-word - 中文段落慎用
letter-spacing模拟对齐——它全局作用于所有字符，顿号、句号后会出现明显空隙，语义和可访问性双崩坏
真正难的不是写对那几行 CSS，而是判断什么时候该放弃 justify：标题、按钮、导航项这类单行内容，硬套 text-align: justify 只会引入不可控字距或兼容性雷区。此时 flex + justify-content: space-between 或 JS 动态插零宽空格（记得加 aria-hidden="true"）才是更可控的选择。
