CSS文本两端对齐技巧：text-align-last属性详解

本文深入解析了CSS中鲜为人知却极具实用价值的text-align-last属性，揭示其必须与text-align: justify配合才能生效的核心规则、仅作用于最后一行（单行时直接生效）的独特行为，以及在Chrome/Firefox中的典型失效原因；同时直面IE和Safari兼容性短板，提供伪元素撑开、hyphens断字优化等实战替代方案，并一针见血指出末尾空白、内联元素干扰、字号混用等隐藏陷阱——帮你避开“看似设了却不起作用”的坑，在追求精致排版的同时守住兼容底线与可维护性。

text-align-last 在 Chrome/Firefox 中不生效？检查是否用了 text-align: justify

只设 text-align-last: justify 没用，它必须和 text-align: justify 配合才能起作用。浏览器默认对齐是 left，此时 text-align-last 完全被忽略。

• 必须同时写：text-align: justify; text-align-last: justify;
• 仅最后一行生效（比如段落末尾、

  的最后一行），不是每行都拉伸

• 如果内容只有一行，text-align-last 会直接控制这一行的对齐方式

IE 和 Safari 对 text-align-last 的支持很有限

IE10+ 支持，但仅限于块级元素且需开启 -ms-text-align-last；Safari 直到 15.4 才开始部分支持，16+ 才相对稳定。iOS Safari 16.4 之前基本不认这个属性。

• 兼容方案：用 text-align: justify + 伪元素 ::after 插入空格撑开最后一行（需配合 white-space: pre-wrap）
• 注意：伪元素方案在换行频繁或响应式文本中容易错位，尤其遇到 word-break: break-word 时
• 不要依赖 text-align-last 做核心排版，它本质是个“锦上添花”的 CSS 属性

为什么设置了 text-align-last: justify，最后一行还是左对齐？

常见原因是内容末尾有换行符、空格或内联元素干扰了“最后一行”的判定。CSS 引擎会把末尾空白当作可压缩内容，导致实际最后一行只剩一个空格，自然无法拉伸。

• 检查 HTML 源码末尾是否有无意的换行或空格（比如

  文字

  \n 后面多了一行）
• 给容器加 font-size: 0; 再给子元素重设字体大小，能消除 inline 元素间的空白间隙
• 避免在段落末尾放 、 等未闭合或带空格的内联标签

替代方案：用 text-align: justify + hyphens: auto 提升可读性