CSS如何实现文本两端对齐_text-align-last属性排版优化

text-align-last 仅在 text-align: justify 下对最后一行生效，单行、无换行或浏览器不支持时无效；可靠方案需结合 hyphens、word-break 或伪元素补空格。

text-align-last 不是万能的两端对齐开关，它只在 text-align: justify 生效时才起作用，且浏览器支持不一、行为差异明显——直接设 text-align-last: justify 很可能在 Safari 或旧版 Edge 里完全失效。

为什么设置了 text-align-last 却没效果？

根本原因是：该属性仅对“最后一行”生效，且前提是整段文本已启用两端对齐。如果父容器没设 text-align: justify，或文本只有一行（比如短标题）、或内容被 white-space: nowrap 锁死换行，text-align-last 就不会触发。

• 必须同时设置 text-align: justify 才能激活 text-align-last
• 单行文本默认没有“最后一行”的概念（整行即第一行），此时需配合 text-align-last 的 auto 或 justify，但 Safari 会忽略
• Flex 或 Grid 容器中的文本，若未显式设 text-align，继承值常为 start，导致 text-align-last 失效

text-align-last 的取值与真实表现差异

常见取值中，justify 和 auto 最易混淆：Chrome/Firefox 下 justify 会让末行字间距拉伸（类似首行），而 auto 通常退回到左对齐；但 Safari 15.4+ 之前根本不支持 justify，一律按 auto 处理，且不拉伸字间距。

• text-align-last: justify：末行强制两端对齐（字间距可变），Chrome/Edge 支持良好，Firefox 需要 hyphens: auto 配合才更自然
• text-align-last: auto：由浏览器决定，实际多为左对齐，无法保证一致性
• text-align-last: start / end：明确指定末行对齐方向，兼容性最好，但失去“两端”语义

真正可靠的两端对齐方案（绕过 text-align-last 限制）

当需要稳定控制末行对齐，尤其面对中文排版或跨浏览器场景，建议放弃纯 CSS 的 text-align-last，改用组合策略：

立即学习“前端免费学习笔记（深入）”；

• 对段落级文本：用 text-align: justify + text-align-last: justify，并添加 hyphens: auto 和 word-break: break-word 提升断行合理性
• 对单行标题类文本：不用 text-align-last，改用伪元素补空格：::after { content: "　"; width: 100%; display: inline-block; }，再结合 text-align: justify
• 对严格对齐需求（如发票、合同）：服务端或 JS 动态插入零宽空格（​）或调整末尾词间距，CSS 仅作兜底

最常被忽略的一点：中文无空格连写时，text-align: justify 默认不拆字，末行对齐几乎无效——必须配合 word-break: break-all 或 overflow-wrap: break-word，否则 text-align-last 再怎么设也没用。