CSS中text-align: justify文本两端对齐

text-align: justify; 是 CSS 中用于控制文本对齐方式的属性值，它的核心作用是让文本两端对齐（分散对齐），使段落左右边缘整齐排列。以下是详细解析：

---

作用效果

1. 均匀分布间距
   浏览器会自动调整单词/字符之间的间距，使文本的左右两端同时对齐容器边界（首行缩进除外）。

   • ✅ 非最后一行：每行文本左右两端严格对齐容器边缘（类似报纸排版）。

   • ❌ 最后一行：默认按左对齐处理（除非额外设置 text-align-last: justify;）。

2. 视觉体验
   适合大段文本排版（如文章、新闻），能创建整洁的块状文本区域，提升可读性和专业感。

---

对比其他对齐方式

属性值	效果	示例
justify	两端对齐（分散对齐）	[文本左右平齐]
left (默认)	左对齐	[文本靠左参差]
right	右对齐	[参差文本靠右]
center	居中对齐	[文本居中参差]

---

代码示例

html

复制

下载

运行

<style>.justified-text {text-align: justify; /* 关键属性 */width: 300px;       /* 需要固定宽度 */border: 1px solid #ccc;padding: 10px;}
</style><div class="justified-text">This is a sample text demonstrating justified alignment. The browser will adjust spaces between words to make both edges flush.
</div>

---

注意事项

1. 容器需有宽度
   只在固定宽度容器中生效（如 width: 500px;），否则文本无分散空间。

2. 最后一行问题
   默认最后一行左对齐，需额外添加解决：

   css

   复制

   下载

   text-align: justify;
   text-align-last: justify; /* 强制最后一行两端对齐 */

3. 单词间距过宽
   长单词或短行可能导致间距过大，可通过 hyphens: auto; 添加连字符优化：

   css

   复制

   下载

   hyphens: auto; /* 自动在单词内添加换行连字符 */

---

适用场景

• 报纸/杂志风格的文章排版

• 多栏布局（column-layout）

• 需要严谨视觉设计的文本块

⚠️ 避免在窄容器中使用（如手机屏幕），过大的单词间距会降低可读性。