17370845950

text-align: justify 实现两端对齐但最后一行默认左对齐，中文自然，英文需配合 word-break、hyphens 等避免词间距异常，可用伪元素或 text-align-last 控制末行对齐。

text-align: justify 可以让文本在行内实现两端对齐，但实际使用中常出现“最后一行左对齐”或“单词间距异常拉伸”的问题。关键不是加了就有效，而是要配合语境和细节处理。

基础用法：段落级两端对齐

给块级元素（如 p、div）设置 text-align: justify 即可启用两端对齐：

• 适用于中文效果较自然（字宽一致，浏览器自动调整字间距）
• 英文/混合文本需注意：浏览器默认只在空格处断行并拉伸间隙，短行易出现过大词间距
• 最后一行默认左对齐（这是 CSS 规范行为，不是 bug）

解决最后一行不居中/不对齐的问题

如果希望结尾也“撑满”，有几种实用方式：

• 在段末加  （不间断空格）或 ​（零宽空格），骗浏览器多算一行
• 用伪元素补全：::after { content: ""; display: inline-block; width: 100%; } —— 强制生成一个不可见的满宽行，让最后一行也被 justify
• 对单行标题类文本，更推荐用 text-align: justify; text-align-last: justify;（部分新浏览器支持）

英文/混排时避免过度拉伸的技巧

英文两端对齐容易把单词间空隙撑得很难看，可配合：

• word-break: break-word; 或 overflow-wrap: break-word; 允许长单词内断行
• hyphens: auto; 开启连字符（需配合语言属性 lang="en"）
• 限制最小词间距：letter-spacing 设为较小负值（慎用，影响可读性）

中文排版小提醒

中文本身没有空格分隔，justify 主要靠调整字间距实现对齐，多数现代浏览器表现良好。但要注意：

• 避免在短句或标签内滥用（如按钮文字、导航项），易导致字距不均
• 移动端小屏下，若每行字数过少（如仅 3–4 字），justify 反而显得松散，建议设 min-width 或媒体查询降级为 left
• 搭配 line-height 和字体选择，能让对齐后的视觉节奏更稳

基本上就这些。justify 不是万能对齐开关，而是需要结合内容长度、语言特性、设备环境一起调的排版工具。