CSS为什么Text-align-last末行对齐在Safari不生效
前端开发中，文本排版是个精细活儿。想让段落两端对齐，尤其是最后一行也乖乖听话，text-align-last 属性看起来是个完美的选择。但如果你在 Safari 浏览器里试过，可能会发现：怎么折腾都没反应？别怀疑自己，问题不在你。
Text-align-last 在 Safari 中完全不支持
直接说结论吧：text-align-last 这个属性，在 Safari（无论是 macOS 还是 iOS 的所有版本）里，压根就没被实现。这不是什么兼容性前缀能解决的，加 -webkit- 前缀也完全没用。本质上，Safari 浏览器直接把它当成了“空气属性”——你写了 text-align-last: justify;，它只会静默忽略，末行该怎么对齐还怎么对齐（通常是按父容器的 text-align 主值来，比如左对齐）。
为什么不能靠 white-space: pre-wrap + 末尾空格硬凑
遇到不支持的特性，开发者们总会想出各种“野路子”。有人试过在段落末尾手动塞一堆 或者普通空格，再配合 white-space: pre-wrap 属性，试图把最后一行“撑开”，模拟出两端对齐的效果。这招在 Safari 里乍一看好像有点用，但实际上极不稳定，堪称“踩坑大全”：
- 屏幕缩放、字体加载延迟、响应式重排……这些日常场景都会导致空格数量和预期对不上，布局一下子就乱了。
- 更关键的是，在无障碍访问场景下，冗余的空格可能会被读屏软件误读，影响内容的语义表达，这可不是小事。
所以，这条路基本走不通。
用 ::after 伪元素模拟末行右对齐占位
既然直接支持的路被堵死了，换个思路：我们不直接操作文本，而是“欺骗”一下浏览器的排版引擎。核心思路是，利用 ::after 伪元素在文本块末尾插入一个看不见的“占位块”，让它参与行内布局，从而触发 text-align: justify 的对齐逻辑。关键是，这个占位块要足够“宽”，并且只影响最后一行。
具体怎么操作？有几个要点必须把握：
立即学习“前端免费学习笔记（深入）”；
- 首先，给文本容器设置
text-align: justify;。为了提升 Safari 对两端对齐的基础支持，最好再加上text-justify: inter-word;。 - 然后，就是
::after伪元素的戏份了。它的content必须设为空字符串""，display要设为inline-block。最关键的一步：把它的width设为100%。这样一来，这个伪元素就会在末行占据一个“词”的完整宽度，迫使它前面的所有文字为了填满整行而实现两端对齐。 - 别忘了加上
vertical-align: top;，这样可以避免基线对齐导致的意外高度问题。 - 如果容器本身设置了
line-height，伪元素也需要继承这个值，否则可能会把最后一行撑高，破坏视觉一致性。
来看一段示例代码，一目了然：
.justify-last {
text-align: justify;
text-justify: inter-word;
}
.justify-last::after {
content: "";
display: inline-block;
width: 100%;
vertical-align: top;
}
这个方案的边界和坑
当然，这个方案也不是银弹，它是在浏览器现有渲染机制下的一种巧妙平衡，自然也有它的局限性和容易“翻车”的地方：
- 高度裁切问题：如果容器高度固定并且设置了
overflow: hidden，这个伪元素占位块可能会被直接裁掉，导致末行对齐瞬间失效。 - 单行段落陷阱：如果段落内容只有一行怎么办？伪元素会强行制造出一个“第二行”，导致布局错乱。通常的解决办法是，要么把容器改成
display: inline，要么用 Ja vaScript 检测行数，动态添加或移除类名。 - 连字符冲突：当使用
hyphens: auto自动断字时，Safari 对::after伪元素的行内布局行为会更加难以预测。稳妥起见，在这种场景下建议禁用连字符。 - 字体变化不响应：伪元素的宽度是固定的（100%容器宽度），它无法智能地响应用户改变系统字体大小等操作。在纯 CSS 方案下，这是个硬伤。
说到底，要想覆盖所有边缘情况，最后往往还是需要 Ja vaScript 出场兜底。比如用 getClientRects() 测量实际行数、判断末行宽度是否达到触发对齐的条件，再动态决定是否启用伪元素占位策略。纯 CSS 模拟，终究是在浏览器渲染机制的夹缝中寻找那一点微妙的平衡。
