text-align: justify 实现文字两端对齐需配合 text-justify、word-break 等属性，因中文无天然词间空隙，纯 css 难以高质量实现，推荐结合 left 对齐与视觉优化。
text-align: justify 是实现 HTML 文字两端对齐最直接、最规范的方式，但仅写这一句往往不够——浏览器默认会对最后一行取消两端对齐，且英文单词断行、中文空格塌陷、标点悬挂等问题会破坏排版效果。
为什么 text-align: justify 看起来没生效？
常见现象：段落设置了 text-align: justify，但文字仍左对齐，或末行明显缩进不均。
- 父容器宽度不足（比如
<p></p>在窄屏下内容单行，无法拉伸） - 中文文本缺乏可断行的空格或标点，浏览器无处插入额外间距
- 未重置默认的
word-break或overflow-wrap，导致长词（如 URL、连续英文）撑破容器 - 某些旧版 Safari 对
justify支持不一致，需配合text-justify: inter-word
text-align: justify 的最小可靠写法
只靠一行 CSS 不足以稳定输出专业排版。推荐组合使用：
.justify-text {
text-align: justify;
text-justify: inter-word; /* 明确指定按单词间距调整，非浏览器默认的 auto */
hyphens: auto; /* 启用软连字符（对英文有效，中文无效但无害）*/
word-break: break-word; /* 防止超长不可断字符串溢出 */
}
注意：text-justify 在 Firefox 和 Chrome 中已支持，但 Safari 目前仍需加前缀或忽略；hyphens 对中文无作用，但加了不报错，不影响渲染。
中文两端对齐的现实限制与替代思路
纯 CSS 实现高质量中文两端对齐非常困难，因为中文没有天然“单词间隙”，浏览器只能靠字间距（letter-spacing）强行拉伸，容易导致字距失衡、阅读困难。
- 不要对短句（如标题、按钮文字）用
justify—— 它会把两个字撑满整行 - 避免在
<span></span>或内联元素上设justify，它只对块级容器生效 - 若必须精细控制，可用 JavaScript 动态插入零宽空格（
）或软换行符（ - 更稳妥的做法是：用
text-align: left+ 左右留白 + 行高/字重优化，视觉上更干净
真正稳定的两端对齐，依赖的是内容长度、字体特性、容器宽度三者配合。写死一行 text-align: justify 很容易在移动端或小字号下失效，务必实测不同设备和内容长度下的实际渲染效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
