text-align-last: justify 不能单独生效，必须与 text-align: justify 配合使用且仅作用于多行文本的最后一行；单行、无换行、未启用 justify 时完全无效，中文因无天然断点更易失效，ios safari 15.4 前不支持，兼容性差时应采用 ::after 伪元素兜底。
text-align-last 本身不能单独实现两端对齐，它必须和 text-align: justify 配合使用，且只在多行文本的最后一行生效——单行文本、没换行、没启用 justify，它就完全不工作。
为什么设置了 text-align-last: justify 却没效果？
最常见原因是漏掉了前提条件：text-align: justify 没设，或者文本根本没换行。
-
text-align-last是个“开关型”属性：只有text-align值为justify时才被解析，否则直接忽略 - 浏览器判断“最后一行”依赖真实换行——如果容器太宽、文字太少、
white-space: nowrap或含强制<br>，都可能导致只有一行，从而无“最后一行”可对齐 - 中文段落尤其容易失效：中文字间无天然空格，
justify缺乏断词依据，部分浏览器（如旧版 Safari）干脆跳过两端对齐逻辑
text-align-last 在不同浏览器中的行为差异
不是所有支持 justify 的浏览器都支持 text-align-last，而且启用方式不同。
- Chrome 47+、Firefox 12+ 默认支持；Safari 直到 15.4+ 才原生支持，此前版本（包括 iOS 15.3 及更早）完全忽略该声明
- Firefox 曾需手动开启
layout.css.text-align-last.enabled首选项，新版已默认开启，但若项目需兼容定制内核或旧环境，仍需验证 - IE 支持但行为异常：可能把单行当作“最后一行”并强行拉伸，导致字间距爆炸；Edge 基于 Chromium 后基本一致，但仍建议用
CSS.supports('text-align-last', 'right')检测 - 移动端 WebKit（如 iOS Safari）对
text-align-last的 layout 计算较慢，滚动时偶有闪烁，尤其搭配transform或will-change时更明显
如何安全地 fallback 到伪元素方案？
当目标环境必须兼容 Safari text-align-last 不可靠，推荐用 ::after 强制生成“视觉最后一行”。
- 给容器设置
text-align: justify，再加::after { content: ""; display: block; width: 100%; }—— 这样原本最后一行变成倒数第二行，新插入的空块成为“最后一行”，自然左对齐（因为空块无内容，text-align-last不影响它） - 若需最后一行严格左对齐（而非默认左），可在
::after后再加一个span包裹末尾文字，设display: inline-block; width: 100%; text-align: left; - 注意：该方案会破坏语义结构，不适合屏幕阅读器友好场景；若内容来自 CMS 或用户输入，务必先用正则清理尾部隐藏字符：
.replace(/[\u2000-\u200F\u2028\u2029\u202F\u2060\ufeff]+$/g, '')
真正起效的三个硬性条件缺一不可
哪怕写对了 CSS，只要以下任一条件不满足，text-align-last 就不会渲染：
- 容器是块级元素（
p、div、h1等），display: inline元素无效 - 文本实际发生换行（可通过
min-height: calc(1.5em * 2)或限制容器宽度触发） - 浏览器支持且未被其他样式覆盖（比如父级设了
text-align: left且选择器权重更高）
最容易被忽略的是“换行”这个前提——很多人在调试时盯着 CSS 看半天，却没检查 console.log(element.scrollHeight > element.clientHeight) 是否为 true。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
