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

2025/6/10 8:29:46 来源：https://blog.csdn.net/BillKu/article/details/148463242 浏览: 次关键词：CSS中text-align: justify文本两端对齐

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

作用效果

均匀分布间距
浏览器会自动调整单词/字符之间的间距，使文本的左右两端同时对齐容器边界（首行缩进除外）。
- ✅ 非最后一行：每行文本左右两端严格对齐容器边缘（类似报纸排版）。
- ❌ 最后一行：默认按左对齐处理（除非额外设置 text-align-last: justify;）。
视觉体验
适合大段文本排版（如文章、新闻），能创建整洁的块状文本区域，提升可读性和专业感。

对比其他对齐方式

属性值	效果	示例
`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>

注意事项

容器需有宽度
只在固定宽度容器中生效（如 width: 500px;），否则文本无分散空间。
最后一行问题
默认最后一行左对齐，需额外添加解决：

css

复制

下载
```
text-align: justify;
text-align-last: justify; /* 强制最后一行两端对齐 */
```
单词间距过宽
长单词或短行可能导致间距过大，可通过 hyphens: auto; 添加连字符优化：

css

复制

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