CSS 实现文本自动均匀撑满行宽的排版技巧-html教程-PHP中文网

CSS 实现文本自动均匀撑满行宽的排版技巧

通过 text-align: justify 可使段落内文字自动调整词间距与字间距，使每行左右对齐、均匀填满容器宽度，适用于标题、引文、响应式正文等需精致排版的场景。

通过 `text-align: justify` 可使段落内文字自动调整词间距与字间距，使每行左右对齐、均匀填满容器宽度，适用于标题、引文、响应式正文等需精致排版的场景。

要实现如示例图中所示的“自动词间距扩展以填满整行”的效果，最直接且标准的 CSS 方案是使用 text-align: justify。该属性不仅对齐文本两端，还会智能分配额外空白（优先增加单词间间距，必要时微调字母间距），从而让每一行（除最后一行外）严格贴合容器左右边界。

以下是最小可行代码：

.autoWrap {
  max-width: 500px;
  text-align: justify;
  /* 可选：提升justify效果的辅助声明 */
  hyphens: auto;           /* 启用断字，避免过长单词破坏对齐 */
  line-height: 1.6;        /* 保证可读性 */
}

<p class="autoWrap">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente consectetur vero laboriosam...
</p>

⚠️ 注意事项：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

text-align: justify 默认不对最后一行生效（保持左对齐），若需强制最后一行也拉伸，可添加伪元素补全：
```
.autoWrap::after {
  content: "";
  display: inline-block;
  width: 100%;
}
```
在短段落或含大量空格/换行符的文本中，可能产生异常大间距；建议配合 word-break: break-word 或 overflow-wrap: break-word 防止单词溢出。
浏览器兼容性极佳（IE6+ 支持），但 hyphens: auto 需添加 -webkit- 和 -moz- 前缀以支持 Safari/Firefox。