text-align: justify 仅在多行、有换行机会且容器宽度明确时生效；单行、窄容器、纯中文无空格、flex子项中常失效，需用::after伪元素或text-align-last等方案兜底。
text-align: justify 能生效，但不是加了就管用——它只在多行文本、有换行机会、且容器宽度明确时才真正拉伸字间距。单行、窄容器、纯中文无空格串、flex 子项里直接用，基本都白搭。
为什么 text-align: justify 看不到效果？
常见错误现象：写了 text-align: justify，但文字还是左对齐，或者最后一行明显缩进。
- 单行文本不会触发 justify —— 浏览器没“行”可拉，
justify本质是调整换行后各行的内部间距 - 容器没有固定宽度（比如
width: 100%但父级是display: flex且未设flex-shrink: 0），导致浏览器无法计算“该拉多少” - 中文段落里全是连续汉字、无标点或空格，浏览器缺乏分词锚点，尤其在 Safari 和旧版 Android WebView 中表现更差
- 英文段落含超长单词（如 URL）、未启用
hyphens: auto或word-break: break-word，会撑破行宽，破坏对齐节奏
让最后一行也两端对齐的三种可靠方式
规范规定最后一行默认左对齐，这不是 bug，而是行为定义。要覆盖它，得手动干预换行上下文：
- 用
::after插一个不可见满宽块：content: "";+display: inline-block;+width: 100%;—— 兼容性最好，所有现代浏览器和 IE11 都支持 - 用
text-align-last: justify—— 更语义化，但 iOS Safari ≤ 15.6 和部分 Android WebView 不支持，上线前必须查 caniuse - 在文本末尾插入零宽空格
（HTML）或\u200B（JS）—— 简单，但需注意加aria-hidden="true"，避免屏幕阅读器误读为空格中断
中文、英文、混排场景下的关键差异
中英文 justify 的底层逻辑不同，不能套用同一套参数：
- 中文推荐加
text-justify: inter-ideograph（仅 IE 支持）或现代等效方案：text-justify: distribute（Firefox 支持，Chrome/Safari 忽略），实际项目中更依赖::after+ 容器宽度控制 - 英文务必配合
lang="en"属性，再启用hyphens: auto，否则长单词会让整行间距崩坏 - 中英文混排时，避免在中文词间硬加
letter-spacing模拟对齐——它会全局影响字距，小屏下易发散或重叠 - 表格单元格（
<td>）里 <code>text-align: justify最稳，因为天然具备明确宽度和换行上下文移动端与表单场景的避坑要点
手机小屏上 justify 对宽度变化极度敏感，稍不注意就字距失控：
- 在
@media (max-width: 480px)下强制降级为text-align: left，比硬撑对齐更可读 - 表单字段对齐（如“姓名：______”）别用
text-align: justify直接套在 label 上——应把 label 和 input 包进display: flex容器，用justify-content: space-between控制间距 - Flex 容器子元素设
text-align: justify常失效，因 item 默认不占满父宽；此时要么给子项加flex: 1，要么改用justify-content: space-between - 标题、按钮文案等短文本禁用 justify —— 字数少 + 字距强行拉伸 = 可读性暴跌
最常被忽略的一点：justify 不是视觉修饰，而是排版逻辑。它依赖浏览器对“可换行位置”的识别能力，而这个能力在中文里远不如英文稳定。所以与其调参赌兼容性，不如优先用
::after+ 明确宽度兜底，再按设备能力渐进增强。 - 在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
