text-align-last: justify 在 safari 中不生效，因 ios safari 直至 15.4、macos safari 直至 16.4 才原生支持，旧版本（如 15.7 或 16.3）直接忽略该声明；且必须与 text-align: justify 配合使用，缺一则无效；中文段落因无天然断点更易失效。
text-align-last: justify 为什么在 Safari 里完全不生效
因为 iOS Safari 直到 15.4、macOS Safari 直到 16.4 才开始支持 text-align-last: justify，更早版本（包括绝大多数 iOS 用户当前仍在用的 15.7 或 16.3）会直接忽略该声明，连解析都不做。Chrome 和 Firefox 虽然从较早版本就支持，但前提是必须同时声明 text-align: justify——只写 text-align-last 等于没写。
-
text-align: justify是开关，缺它text-align-last就不会被解析 - 即使写了，若容器宽度富余、文字太短、或存在
white-space: nowrap，浏览器可能压根不触发换行，也就没有“最后一行”可对齐 - 中文段落尤其危险：无天然空格，
justify缺乏断词依据，部分 Safari 版本会直接跳过两端对齐逻辑，导致text-align-last形同虚设
text-align-last 在单行文本中行为混乱
很多人误以为 text-align-last 能控制单行文本的对齐，其实它在单行场景下表现极不稳定：IE 会把它当普通 text-align 处理，强行拉伸字间距；Firefox 则可能退回到 start；Safari 旧版干脆不响应。真正可靠的判断依据是——浏览器是否识别出「这是自动换行产生的最后一行」，而不是你主观认为“这是一段文字”。
- 检查 DOM 中是否混入了不可见字符：
\u200B（零宽空格）、\uFEFF（BOM）、全角空格等，它们会让浏览器误判行尾位置 - 避免在 HTML 源码中手动换行或插入
word-break: break-word+white-space: normal - 如果内容来自 CMS 或用户输入，渲染前建议清洗末尾空白：
.replace(/[\u2000-\u200F\u2028\u2029\u202F\u2060\ufeff]+$/g, '')
用 ::after 伪元素兜底时的典型错位问题
主流 fallback 方案是给容器加 ::after { content: ""; display: block; width: 100%; }，让原本最后一行变成倒数第二行，从而规避 text-align-last 失效问题。但这招在响应式环境里容易翻车。
- 当容器宽度动态变化（比如 flex 项缩放、vw 单位），
::after的width: 100%可能因盒模型计算误差错位一像素，导致末行视觉上偏左或偏右 - 若父容器用了
transform或will-change，iOS WebKit 下::after的 layout 计算会变慢，滚动时出现闪烁 - 遇到
word-break: break-all或富文本中的内联标签（如<span></span>），伪元素可能被挤到非末尾位置，失去兜底意义
如何检测并安全启用 text-align-last
别依赖 UA 字符串判断 Safari 版本，实际运行时用 CSS.supports('text-align-last', 'justify') 更可靠。但要注意：这个 API 在某些定制内核 WebView（如微信内置浏览器、部分安卓厂商浏览器）里可能返回 true 却不真正生效。
- 渐进增强写法应为：
text-align: justify; text-align-last: left;（现代浏览器最后一行左对齐）+::after（兜底） - 若项目需兼容 IE，
text-align-last必须配合-ms-text-align-last，且仅对块级元素有效 - 真正难处理的是中文窄屏场景：小容器 + 短句子 + 无空格，此时
justify本身就会失效，text-align-last更无从谈起——这种情况下，与其硬扛 CSS，不如考虑 JS 动态插入零宽空格辅助断行
最常被忽略的一点：text-align-last 不是排版核心能力，它是锦上添花的修饰属性。一旦发现它在某个环境里行为异常，优先检查 text-align: justify 是否真正起效，而不是反复调 text-align-last 的值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
