text-align-last不能单独实现两端对齐，必须与text-align: justify配合使用，且仅在块级容器、多行文本或自动换行产生的最后一行生效；缺少任一条件（如未设justify、无换行、非块级元素）浏览器均会忽略该属性。
text-align-last 不能单独实现两端对齐，它必须和 text-align: justify 配合使用，且只在多行文本的最后一行生效——单行、无换行、没设 justify，它就完全不工作。
为什么设置了 text-align-last: justify 却没效果？
最常见原因是漏掉了前提条件：没写 text-align: justify，或者文本根本没换行（比如容器太宽、内容太短、white-space: nowrap 干扰了分行）。
-
text-align-last是个“开关型”属性：只有text-align值为justify时才被解析，否则直接忽略 - 浏览器判断“最后一行”依赖真实换行——如果所有文字挤在一行，那就没有“最后一行”可对齐
- 中文段落尤其容易失效：中文字间无天然空格，
justify缺乏断词依据，部分浏览器（如旧版 Safari）会跳过两端对齐逻辑 - 检查 DOM 中是否混入不可见字符（如零宽空格
\u200B、全角空格\u3000），可用element.textContent.trim().split(/\s+/)在控制台验证分词结果
text-align-last: justify 在单行文本中怎么用？
单行即末行，所以理论上可以生效，但必须构造出它能起作用的上下文。
- 容器必须是块级元素（如
div、p），不能是span或display: inline - 必须同时声明：
text-align: justify+text-align-last: justify - HTML 中避免末尾换行或空格：
<div>姓名：张三</div>后不要换行，否则那个换行符可能被当作“最后一行内容” - Firefox 仍需前缀：
-moz-text-align-last: justify
Safari 兼容性差怎么办？用 ::after 伪元素兜底
iOS Safari 直到 15.4+ 才原生支持 text-align-last，此前版本完全忽略。推荐用视觉模拟方案。
- 给容器设
text-align: justify，再加::after { content: ""; display: block; width: 100%; } - 这样原本最后一行变成倒数第二行，新插入的空块成为“最后一行”，自然左对齐（因为空块无内容）
- 若需最后一行严格左对齐，可在末尾文字外包裹一个
span，设display: inline-block; width: 100%; text-align: left; - 注意：该方案破坏语义结构，不适合屏幕阅读器友好场景
真正难的不是写对那两行 CSS，而是判断当前环境是否真的需要 text-align-last——它在中英文混排、小字号、富文本输入等场景下，行为高度依赖浏览器内核和内容结构，稍有不慎就退化成左对齐甚至字间距爆炸。建议优先用 CSS.supports('text-align-last', 'justify') 检测后再启用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
