CSS 怎么让文字两端对齐？text-align:justify 完整写法讲透

CSS 文字两端对齐，就是给段落设 text-align:justify，让每一行的首尾都贴齐容器的左右两边，而不是只有左边齐、右边参差不齐。你在做卡片说明、文章正文、宣传文案时，常会遇到「左边一条线、右边狗啃的」排版，看着就很业余。本文基于 CSS 规范与 Chrome / Firefox 实测，讲清 justify 到底做了什么、为什么中文常常看起来没生效、用 text-align-last 怎么补最后一行，以及两个最坑人的例外。看完你就能在合适的场景把文字排得像报纸一样整齐。要先泼盆冷水：justify 是「锦上添花」不是「万能药」，用错地方反而显廉价，下面会专门讲哪些场景要收手。今天这篇文章，编程狮就把这块讲透。

一、先搞清楚：justify 到底做了什么

在 CSS 教程里你学过 text-align 控制行内内容的水平对齐。它有几个取值：left 左对齐、center 居中、right 右对齐，以及我们要讲的 justify。

p {
  text-align: justify;
}

justify 的作用是：浏览器会自动拉开词与词、字与字之间的间距，让除了最后一行以外的每一行，都从左边顶到右边。你可以把它想象成报纸排版——为了边缘整齐，字间距会被微调。注意一点：它只动「间距」，不改变字号，也不会删字。如果你只想要「两端稍微齐一点、但不想拉得太夸张」，也可以用 letter-spacing 手动加一点字间距来近似，只是那属于微调，和 justify 的自动铺满不是一回事。真正上手时，建议先在浏览器里把一段长中文粘进 demo 页，开 justify 关 justify 对比着看，比看十遍说明都直观。

二、为什么中文常常看起来「没生效」

很多人设了 text-align:justify 却觉得没反应，原因是英文靠空格分词，justify 拉的是词间距；而中文整段没有明显的「词边界」，且当一段只有一两行时，浏览器能调整的空间很小，肉眼几乎看不出变化。

.card-desc {
  text-align: justify;
  /* 中文短句常常看不出效果，不是写错了 */
}

常用属性记不住时，CSS 参考手册可以按属性名直接查。这里的关键认知是：justify 在长段落、多行文本上效果才明显；一两句话的标签，它基本「无从下手」。中文读者还会遇到另一个坑：如果一行末尾是个长英文单词或网址，浏览器可能不知道在哪断行，导致整行被撑宽、右边反而更不齐。配合 word-break: break-word 或 overflow-wrap: anywhere 让长串能断开，justify 的铺排才不会被一个超长词破坏。此外，中文段落里如果混入了多余的全角空格，justify 会把它当成可拉伸的间隙，导致某些行莫名空出一截，写文案时顺手清理掉多余全角空格能避免这种怪现象。

三、用 text-align-last 补上最后一行

前面说过，justify 默认不动最后一行，所以段落末尾常常还是左对齐、右边空一块。想要最后一行也两端对齐，加 text-align-last。

p {
  text-align: justify;
  text-align-last: justify;   /* 最后一行也拉齐 */
}

text-align-last 单独控制「最后一行的对齐方式」，取值同样有 left/center/justify。多数情况用 justify 让末行也铺满；若末行只有一两个字，铺满会拉得极开、很难看，这时改成 center 或 left 反而更自然。布局类和 div 居中方法是同一类思路——都是用专门的属性去补某一处的对齐短板。不过要注意：text-align-last 在很旧的浏览器上支持度一般，正式项目里先确认目标环境。

四、两个最坑人的例外

最后一行不联排：默认 justify 跳过最后一行，必须用 text-align-last:justify 才补齐，这是新手问得最多的一点。
英文单词被拆开：当一行塞不下某个长单词时，浏览器可能把它从中间断开（hyphenation 行为），英文段落里尤其明显。可以加 hyphens: auto 让它在音节处断并加连字符，或给容器足够宽度避免断词。
标点被推到行首：中文 justify 有时会把句号、逗号挤到下一行开头，读起来别扭。这是断行规则与间距调整共同导致的，遇到时可以用 text-spacing 或人工调整短语长度来缓解，没有一键开关。

p {
  text-align: justify;
  text-align-last: justify;
  hyphens: auto;   /* 英文长词在音节处断开并加连字符 */
}

五、什么时候不该用 justify

两端对齐不是万能药，下面几种情况建议收手：

短标签、按钮文字：一两行还强行拉间距，字会被扯得很散，反而难读。
大字号标题：标题要的是气口和节奏，拉成两端齐会显僵硬。
中英混排且宽度很窄：中英文间距被拉得忽宽忽窄，观感更差。

补充一个实战经验：justify 和 line-height、letter-spacing 要一起调才好看。行高太紧，两端齐了也显得拥挤；行高太松，字间距又被拉得更开。一般正文 line-height 取 1.6 到 1.8，再加 justify，版面才既整齐又透气。如果你在系统学前端，前端学习路径里把 HTML、CSS、JS 的取舍讲得很清楚，能帮你判断哪些视觉效果值得做、哪些只是花架子。

用开发者工具现场调 justify

光看说明不够，打开浏览器开发者工具的元素面板，选中那段文字，实时开关 text-align:justify 和 text-align-last，肉眼对比两端的变化最直观。CSS 文字两端对齐在移动端尤其要测：很多页面桌面端排版整齐，一到手机上因为容器太窄，justify 把仅有的几个字扯得稀碎。遇到这种情况，可以用媒体查询在窄屏下自动关掉 justify，只在桌面宽屏保留。还有一个细节，justify 配合两端对齐的列表项时，如果某项特别短，整行会被拉得很难看，这类短文本宁可用左对齐也别强行铺满。建议把 justify 当作可选增强，而不是默认全员开启。

总结

CSS 文字两端对齐的核心是 text-align:justify，它把每行（除末行）的间距拉开让首尾贴边，像报纸排版。要点带走：长段落才看得出效果，短句别指望它；最后一行要补 text-align-last:justify；英文长词可配 hyphens:auto 防拆词；按钮、标题、窄容器别用。下一步，把 justify 和行高、字间距一起调，版面会更耐看。

延伸学习

想把 CSS 排版的底子打牢，可以按这个顺序来：

先过一遍 CSS 入门课程，把盒模型、文本属性系统过一遍；
想练手感，HTML + CSS零基础经典教程系列是边学边写的形式，适合巩固。

常见问题

Q：设了 justify 为什么右边还是不齐？
A：因为 justify 默认不动最后一行。补一句 text-align-last:justify，让最后一行也参与拉齐就行。

Q：中文段落用了 justify 几乎看不出变化？
A：正常。中文没有词边界，且只有一两行时可调空间极小。把它用在多行长正文上效果才明显。

Q：justify 会把英文单词从中间拆开吗？
A：可能。一行放不下长单词时浏览器会断词。加 hyphens:auto 让它在音节处断开并加连字符，或给容器留足宽度避免断词。