text-align: justify 单独用于中文段落基本无效，因浏览器默认不在汉字间插入可伸缩间距；需配合 text-justify: inter-character（Chrome 120+/Firefox 110+/Safari 17.4+）才能实现字符级两端对齐，且末行需用 ::after 伪元素“骗”浏览器拉伸。
text-align: justify 单独写在中文段落上基本无效——不是你漏写了什么，是浏览器根本没打算在汉字之间拉伸间距。
为什么 text-align: justify 在中文里看起来没反应
浏览器对 justify 的处理依赖「可伸缩的断点」：英文靠空格分词，中文没有天然空格，Chrome/Safari 默认只在标点或换行处找锚点，字与字之间不参与拉伸。结果就是：
- 单行文本：完全不触发 justify，表现和
text-align: left一样 - 多行文本：前几行可能轻微拉伸，但末行一定左对齐（这是规范行为，不是 bug）
- 超短文本（比如 4 个字）：强行撑开字距，出现难看的“散架”效果
必须搭配 text-justify: inter-character 才能生效
这个属性才是让中文真正支持字符级拉伸的关键，但它有明确的兼容性门槛：
- 仅在 Chrome 120+、Firefox 110+、Safari 17.4+ 中可用；iOS 16 及更早版本 Safari 直接忽略
- 必须和
text-align: justify成对出现，缺一不可 - 不继承，子元素需显式设置或用
inherit -
text-justify: inter-word对中文完全无效，别填错
正确写法示例：
.paragraph {<br> text-align: justify;<br> text-justify: inter-character;<br>}
立即学习“前端免费学习笔记（深入）”；
怎么让最后一行也“撑满”容器宽度
规范强制末行左对齐，想绕过只能“骗”浏览器认为还有下一行：
- 最稳妥：用
::after伪元素补一个display: inline-block; width: 100%的空白行 - 轻量但有风险：在段尾插入零宽空格
或 JS 插入\u200B，但复制粘贴时可能带出异常字符 - 别用
text-align-last: justify：中文场景下多数浏览器无视该声明，Safari 兼容性尤其差
移动端和混排场景要特别小心
小屏宽度下，justify 容易把字距拉得过大，导致文字发散或重叠：
- 建议加媒体查询，在
max-width: 480px时降级为text-align: left - 中英文混排时，英文长单词会破坏对齐节奏，可配合
hyphens: auto（需lang="en"）和word-break: break-word - URL、连续拼音、无标点长串中文，justify 基本失效，此时应考虑改用
letter-spacing手动微调（但注意句号后会出现额外空隙） - flex 容器里的子元素设
text-align: justify常无效——因为 flex item 默认不占满父宽，应改用justify-content: space-between
真正麻烦的从来不是加哪一行 CSS，而是判断当前环境是否支持 text-justify: inter-character，以及要不要为旧浏览器兜底。如果项目必须兼容 iOS 16 或 Android WebView，伪元素方案比依赖新属性更可靠。
