text-align: justify 最后一行难看是因为规范强制拉伸空格导致字间距突兀，非 bug；可用 text-align-last 控制末行对齐或伪元素模拟占位兼容旧浏览器，但中文场景下通常不推荐使用。
text-align: justify 时最后一行为啥会难看
因为 text-align: justify 默认强制拉伸最后一行，把空格撑开，导致字间距突兀变大。这不是 bug，是规范行为——它只对「非最后一行」做两端对齐，但最后一行仍按 text-align: start（即左对齐）处理；问题出在很多人误以为它会“智能收尾”，其实不会。
常见错误现象：text-align: justify 用在短段落或英文单词少的中文段里，末行出现巨大空白、词间断开、甚至单字被孤立在行尾。
用 text-align-last 控制最后一行对齐方式
text-align-last 是专门为此设计的 CSS 属性，但它有兼容性坑：IE 和 Edge 旧版本支持，Chrome/Firefox 直到较新版本才稳定支持（Chrome ≥ 80，Firefox ≥ 73）。Safari 仍不支持（截至 Safari 17）。
实操建议：
- 只在明确知道目标环境支持时使用，比如内部管理后台（可控浏览器版本）
- 值设为
left或start，避免用justify（那又回到原问题） - 必须配合
text-align: justify才生效，单独写没用
示例：
.justified {
text-align: justify;
text-align-last: left;
}
更通用的解法：用 pseudo-element 模拟“隐形占位”
当需要兼容 Safari 或老浏览器时，这是目前最稳的方案。原理是让最后一行“看起来”不是最后一行：在内容末尾插入一个不可见、不占宽、但能阻止浏览器认定该行为末行的元素。
实操建议：
- 用
::after伪元素 +content: ""+display: inline-block+ 极小宽度（如width: 1px） - 不能用
visibility: hidden或opacity: 0，它们不影响布局判定 - 慎用
font-size: 0，可能影响行高计算
示例：
.justified-safe::after {
content: "";
display: inline-block;
width: 1px;
overflow: hidden;
}
中文场景下 justify 本身是否必要
绝大多数中文排版中，text-align: justify 不仅无益，反而破坏阅读节奏。汉字天然方块、无空格分隔，强行拉伸只会让字距失衡，尤其在小字号或窄容器里。
使用场景判断：
- 纯英文段落（尤其带连字符）：justify 效果尚可
- 中英混排：基本失效，英文单词被撑开，中文无变化
- 移动端小屏：justify 容易造成单字换行或异常断行
真正需要“两端对齐”的中文出版级排版，靠的是专业排版引擎（如 LaTeX 的 microtype）或服务端预渲染，不是前端 CSS 能解决的。
复杂点在于：你得先想清楚——这到底是 UI 设计需求，还是真实可读性需求。如果是前者，得和设计师确认是否接受降级方案；如果是后者，大概率应该直接放弃 justify。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
