text-align: justify 对中文段落两端对齐效果差，因浏览器默认仅在空格等断点处伸缩间距，而中文无天然词界；需配合 text-justify: inter-character（chrome 120+/firefox 110+/safari 17.4+）或伪元素 ::after 补宽实现末行撑满，且须确保容器有明确宽度、文本足够长并支持换行。
text-align: justify 能实现两端对齐，但中文段落里它大概率“看起来没生效”——不是你写错了，是浏览器默认不给汉字之间加可伸缩间距。
为什么中文段落加了 text-align: justify 还是左对齐
浏览器对 justify 的处理依赖「断行锚点」：英文靠空格，中文没空格，Chrome/Safari 默认不主动在汉字间插入弹性字距。结果就是：只有一行时完全无效；多行时最后一行死活左对齐；整段文字像被截断了一样。
常见错误现象：<p style="text-align: justify;">这是一段中文</p> 渲染后和 text-align: left 几乎一样。
- 必须配合
text-justify: inter-character（现代浏览器）或hyphens: auto+lang="zh"才可能触发汉字级拉伸 -
text-justify在 Chrome 120+、Firefox 110+、Safari 17.4+ 支持；旧版 Safari（如 iOS 16）直接忽略 - 如果父容器没设
lang="zh"，hyphens: auto不会起作用
怎么让最后一行也“撑满”容器宽度
规范规定最后一行默认左对齐，这不是 bug，是设计行为。想让它也两端对齐，得“骗”浏览器：让它认为还有下一行。
- 最稳妥：用
::after伪元素补一行display: inline-block; width: 100%，不占视觉空间但参与对齐计算 - 轻量做法：在段末插入零宽空格
（HTML 实体）或\u200B（JS 插入），但复制粘贴时可能带出异常字符 - 别用
text-align-last: justify—— 中文支持极差，多数浏览器直接无视该声明
中英文混排时的典型陷阱
英文单词太长、中文连续无标点、URL 或拼音串，都会让 justify 失效或崩坏。
- 英文建议加
hyphens: auto（需lang="en"）和word-break: break-word，防止单词撑破行宽 - 中文慎用
letter-spacing模拟对齐：它全局影响所有字符，句号、顿号后会出现明显空隙 - flex 容器里子元素设
text-align: justify常无效——因为 flex item 默认不占满父宽；此时应改用justify-content: space-between - 表格单元格（
<td>）里 <code>justify最稳定，天然有明确宽度上下文移动端和可访问性不能忽略的细节
小屏上字距拉伸更敏感，稍不注意就导致文字发散或重叠；屏幕阅读器也可能把拉伸间隙误读为停顿。
- 建议用媒体查询，在
max-width: 480px时降级为text-align: left - 若用 JS 动态插零宽空格，记得加
aria-hidden="true"，防止读屏软件误读为空格中断 - 标题、按钮、导航项等短文本，不要用
justify—— 字距不均会显著降低可读性
真正高保真的两端对齐，靠结构而非纯 CSS：比如服务端预切分、JS 按行宽注入零宽空格，或导出 PDF 时用专业排版引擎。网页端的
justify始终是“尽力而为”，不是“保证达成”。 - 建议用媒体查询，在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
