CSS文本两端对齐技巧分享

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《CSS实现文本两端对齐方法》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

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 不是万能对齐开关，而是需要结合内容长度、语言特性、设备环境一起调的排版工具。

到这里，我们也就讲完了《CSS文本两端对齐技巧分享》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！