CSS为什么Text-align-last末行对齐在Safari不生效_通过伪元素After模拟空格占位-css教程-PHP中文网

text-align-last 在 safari 中完全不支持：所有版本均未实现，加 -webkit- 前缀也无效，浏览器静默忽略该属性；可用 ::after 伪元素配合 text-align: justify 模拟末行对齐，但存在单行误换行、固定高度裁切、连字符干扰等限制。

css为什么text-align-last末行对齐在safari不生效_通过伪元素after模拟空格占位

Text-align-last 在 Safari 中完全不支持

直接说结论：text-align-last 属性在 Safari（包括 macOS 和 iOS 所有版本）中至今未实现，哪怕加 -webkit- 前缀也无效。这不是兼容性问题，是根本没这个功能。你写 text-align-last: justify;，Safari 会静默忽略，末行照常左对齐（或按 text-align 主值对齐）。

为什么不能靠 `white-space: pre-wrap` + 末尾空格硬凑

有人试过在段落末尾手动加多个或空格，再配 white-space: pre-wrap 试图“撑开”末行。这方法在 Safari 看似有效，但实际极不稳定：

在换行边界会被浏览器合并或截断，尤其当容器宽度动态变化时，占位突然消失
屏幕缩放、字体加载延迟、响应式重排都会导致空格数量与预期错位
无障碍场景下，冗余空格可能被读屏软件误读，影响语义

用 `::after` 伪元素模拟末行右对齐占位

核心思路：不依赖文本内容本身，而是用伪元素在末行行尾插入一个宽度可控的“占位块”，配合 text-align: justify 触发浏览器对齐逻辑。关键点在于让伪元素参与行内布局，且只影响最后一行。

实操要点：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

给容器设 text-align: justify;，并确保 text-justify: inter-word;（提升 Safari 对 justify 的基础支持）
::after 必须设 content: "";、display: inline-block;，且 width 设为 100% —— 这样它才会在末行独占一“词”的位置，迫使前面文字两端对齐
必须加 vertical-align: top; 避免基线错位导致高度异常
如果容器有 line-height，伪元素需继承，否则可能撑高末行

示例代码：

.justify-last {
  text-align: justify;
  text-justify: inter-word;
}
.justify-last::after {
  content: "";
  display: inline-block;
  width: 100%;
  vertical-align: top;
}