text-align: justify 不一定生效，因受内容长度、容器宽度、中英文类型及最后一行处理方式影响；常见失效原因包括单行文本、容器过窄、中文无空格、末尾换行符等。
直接写 text-align: justify 不一定生效，得看内容长度、容器宽度、中英文类型和最后一行处理方式。
为什么加了 text-align: justify 却没效果
常见错误现象：单行文本、容器太窄、中文连续无空格、末尾有换行符或空格。
- 单行文本不会触发拉伸 —— 浏览器没机会调整字间距或词间距
- 内容太短（比如只有“你好”两个字），
justify会强行撑开字距，视觉失衡甚至溢出 - 中文连续字符串（如“数据结构算法”）没有天然分词点，浏览器无法确定在哪插入可拉伸间隙
- HTML 源码里
<p>文字</p>\n结尾的换行符会被当成空白，干扰“最后一行”的判定
让最后一行也两端对齐的可靠写法
仅靠 text-align-last: justify 在 iOS Safari 16.4 之前基本无效，Chrome/Firefox 也要求必须配合 text-align: justify 才起作用。
- 推荐用伪元素方案：
::after { content: ""; display: inline-block; width: 100%; } - 必须确保容器是块级元素（如
<p>、<div>），且未设置white-space: nowrap - 如果段落内含
<span>或图标等内联元素，建议统一设font-size: 0再重置子元素字体大小，避免空白间隙干扰
中英文混排时的细节差异
英文靠空格分词，justify 默认在单词间加空隙；中文则依赖字间微调，但浏览器策略保守。
立即学习“前端免费学习笔记（深入）”；
- 英文建议加
hyphens: auto+lang="en"，缓解长单词导致的间距崩坏 - 中文慎用
letter-spacing模拟对齐 —— 它全局生效，小屏下易发散或重叠 - 纯中文段落若需更均匀拉伸，可尝试
text-justify: inter-ideograph（IE 专属，现代浏览器不支持） - 避免在末尾手动加
或\u200B可靠
响应式场景下容易被忽略的点
宽度动态变化时，同一段文本可能在某些断点变成单行，justify 突然失效，但样式没报错，很难排查。
- 测试时要拖动窗口观察不同宽度下的换行行为，不能只看固定尺寸截图
- 伪元素方案在
word-break: break-word或overflow-wrap: break-word下可能错位，需额外加vertical-align: top - 移动端 Safari 对
text-align-last支持仍不稳定，别把它当主力方案
