通过设置 text-align: justify，可让文本在容器宽度内自动调整单词间距，使每行左右对齐，达到均匀填充效果，适用于标题、摘要等需要整齐排版的场景。
通过设置 `text-align: justify`，可让文本在容器宽度内自动调整单词间距，使每行左右对齐，达到均匀填充效果，适用于标题、摘要等需要整齐排版的场景。
在网页排版中，当希望段落文本严格贴合容器左右边界（即实现“两端对齐”），同时避免出现参差不齐的右边缘时，CSS 提供了一个简洁而高效的解决方案：text-align: justify。
该属性会智能调节单词之间的空白（word-spacing）以及空格字符的拉伸程度（必要时也微调字母间距 letter-spacing），使每一行（除最后一行外）均精确延伸至容器的 max-width 或 width 边界。它无需 JavaScript 计算，不依赖额外 DOM 操作，纯 CSS 即可生效。
✅ 正确用法示例：
.autoWrap {
max-width: 500px;
text-align: justify;
/* 可选：提升可读性 */
hyphens: auto; /* 启用连字符断词（需配合 language 属性） */
line-height: 1.6;
}
<p class="autoWrap"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente consectetur vero laboriosam... </p>
⚠️ 注意事项：
- 最后一行默认不被拉伸（保持左对齐），如需强制最后一行也两端对齐，可添加伪元素技巧（例如
::after { content: ""; display: inline-block; width: 100%; }），但需谨慎使用，可能影响语义与可访问性； -
justify对短句或单行文本效果不明显，更适合多行正文； - 中文等无空格分隔的语言，
text-align: justify主要拉伸标点与字间空白（依赖浏览器支持），若需更精细控制，建议配合text-justify: inter-ideograph（仅部分浏览器支持）或使用弹性布局+flex-wrap替代方案； - 始终确保父容器有明确宽度（如
max-width或width），否则justify将退化为普通左对齐。
总结：text-align: justify 是实现自动单词间距适配容器宽度最标准、兼容性最佳（IE6+ 支持）的 CSS 方案，推荐作为首选用法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
