text-align-last: justify 在 Safari（iOS 16.4 前）完全不生效，必须用 ::after 伪元素模拟非末行上下文以触发 text-align: justify 拉伸；其关键在于 display: inline-block、width: 100% 且彻底隐藏，同时需配合 word-break 或 hyphens 解决中文断点问题。
text-align-last: justify 在 Safari（尤其是 iOS 16.4 之前）根本不会生效，别白费力气单独设它——必须用 ::after 伪元素制造“非末行”上下文，才能让 text-align: justify 正常拉伸。
为什么 text-align-last 在 Safari 里完全没反应
不是你写错了，是 Safari 直到 15.4 才开始实验性支持 text-align-last，且仅限于部分取值；iOS Safari 16.4 之前基本忽略该声明。即使写了 text-align: justify; text-align-last: justify;，Safari 仍按默认逻辑处理：只拉伸中间行，单行或末行一律左对齐。它不报错，也不警告，就是静默失效。
常见误判点：
- 以为加了前缀就能救（
-webkit-text-align-last不存在，Safari 不认） - 在
flex或grid容器里直接对子元素设该属性（继承的text-align常为start，justify根本没激活） - 用 CMS 输出带隐藏换行符的内容，导致浏览器把空行当“最后一行”，伪元素插入位置错乱
用 ::after 伪元素撑开的最后一行必须满足三个条件
不是随便加个 content: "" 就行。要让浏览器把原内容当作“倒数第二行”，伪元素必须被识别为真实参与排版的“最后一行”，否则 justify 仍不触发。
立即学习“前端免费学习笔记（深入）”；
关键写法：
-
display: inline-block（不能是block，否则会换行破坏行内上下文） -
width: 100%（必须占满整行宽度，否则拉伸空间不足） -
height: 0; overflow: hidden; font-size: 0; line-height: 0（彻底隐藏，避免撑高容器或干扰基线）
完整示例：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
div.text-justify {
text-align: justify;
}
div.text-justify::after {
content: "";
display: inline-block;
width: 100%;
height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
}
中文场景下伪元素方案容易失效的两个坑
中文无天然空格断点，text-align: justify 默认不拆字，伪元素再准也没用——浏览器根本没机会插入空隙。
必须同步加：
-
word-break: break-all（粗暴但有效，适合数字、ID 类文本） - 或
overflow-wrap: break-word; hyphens: auto（更友好，但需配合字体支持连字符）
另外，如果 HTML 源码里 <div>姓名：张三</div> 后面跟着换行或空格，浏览器可能把那个空白字符当成“最后一行内容”，导致伪元素失效。建议用 JS 渲染前清理尾部空白：.replace(/[\u2000-\u200F\u2028\u2029\u202F\u2060\ufeff]+$/g, '')。
伪元素在响应式或 flex 布局中错位怎么办
伪元素的 width: 100% 是相对于父容器宽度计算的。如果父容器本身是 flex 子项且宽度不固定（比如 flex-basis: 50%），伪元素可能撑不开，或在小屏下多出空白。
稳妥做法：
- 给父容器显式设
width: 100%或min-width: 0（防 flex 压缩） - 避免在
flex容器上直接设text-align: justify，改用justify-content: space-between+ 单独包裹文本 - 极端情况（如富文本编辑器输出不可控），用 JS 动态插入空
<span></span>，比伪元素更可控
真正难的从来不是加一行 CSS，而是确认当前环境是否真把那行“看不见的内容”当作了参与对齐的合法行——这点在 Safari 和微信内置浏览器里，几乎每次都要手动验证。
