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）
- 内容太短（比如不到两行）或容器太窄，字间距会被强行撑开，视觉失衡
- 整段是连续无标点字符串（如长拼音、URL），
justify直接放弃调整
现代浏览器中让中文两端对齐的可靠写法
Chrome 120+、Firefox 110+、Safari 17.4+ 支持 text-justify: inter-character，这是目前最语义化、最可控的方式：
.justify-chinese {
text-align: justify;
text-justify: inter-character;
}
- 必须同时设置
text-align: justify和text-justify: inter-character，缺一不可 -
text-justify不继承，子元素要显式设置或用inherit - 别填
inter-word——对中文无效，纯属白写 - 确保父容器有明确宽度（比如设了
width或是块级且受上下文限制）
兼容旧版 Safari（iOS 16 及更早）的降级方案
Safari 17.4 之前完全忽略 text-justify，此时只能靠伪元素“骗”浏览器认为还有下一行：
.justify-fallback::after {
content: "";
display: inline-block;
width: 100%;
}
- 这个
::after不占视觉空间，但参与对齐计算，能强制末行也被拉伸 - 比插零宽空格
更稳妥——后者复制粘贴时可能带出异常字符 - 如果用 JS 动态插入，记得加
aria-hidden="true"，避免屏幕阅读器误读 - 表格单元格（
<td>）里 <code>justify天然稳定，无需额外 hack移动端与混排场景必须注意的细节
小屏上字距拉伸更敏感，稍不注意就发散或重叠；中英文混排还会放大问题：
- 在
max-width: 480px时建议用媒体查询降级为text-align: left - 英文部分要配
hyphens: auto（需lang="en"）和word-break: break-word，防止单词撑破行宽 - 别用
letter-spacing模拟对齐——它全局影响所有字符，句号后也会被拉大 - Flex 容器里的子元素设
text-align: justify常失效，因为 flex item 默认不占满父宽；此时该用justify-content: space-between
真正难的不是写那行 CSS，而是判断当前环境是否支持
text-justify: inter-character，以及要不要为 iOS 16 以下用户兜底。这两个决策点，比代码本身更容易被忽略。 - 在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
