text-align-last是控制块级元素最后一行文本对齐的CSS属性，仅在text-align: justify时生效；Chrome 47+、Firefox 12+、Safari 15.4+支持，IE/Edge有差异，需注意兼容性。
text-align-last 是什么，哪些浏览器支持
text-align-last 用于控制块级元素中最后一行文本的对齐方式，仅在 text-align 为 justify 时才生效（否则被忽略）。它不是所有浏览器都默认可用：Chrome 47+、Firefox 12+、Safari 15.4+ 支持，但 Firefox 需启用 layout.css.text-align-last.enabled（新版已默认开启）；IE 支持但行为有差异；Edge 基于 Chromium 后基本一致。
text-align-last 的合法值和典型用法
可取值包括 auto、start、end、left、right、center、justify。最常见组合是：
-
text-align: justify+text-align-last: right：让最后一行右对齐（避免孤零零一个词顶在左边） -
text-align: justify+text-align-last: center：常用于诗歌或标题结尾，视觉更平衡 -
text-align-last: auto表示沿用text-align的值（即最后一行也 justify，可能产生过大字间距）
注意：justify 对单行文本无效——只有换行后存在“最后一行”才有意义。
容易被忽略的兼容性陷阱
实际项目中踩坑最多的是 Safari 旧版本（text-align-last，且无降级 fallback。如果必须兼容，可考虑：
- 用
::after伪元素加content: ""强制生成空行，使“最后一行”变成倒数第二行（但破坏语义） - 服务端/构建时判断行数，对单行内容主动移除
text-align: justify - 用 JavaScript 检测支持性：
CSS.supports('text-align-last', 'right')，再动态加类
另外，text-align-last 对 display: inline 元素无效，只作用于块容器（如 p、div、h1）。
与 text-align 和 line-height 的协同影响
text-align-last 不会改变行高或断行逻辑，但它会影响视觉节奏。尤其当配合较小的 line-height 或紧排字体时，最后一行右对齐可能让末尾标点“悬空”出边界。建议：
- 搭配
hyphens: auto减少最后一行过长单词导致的对齐突兀 - 避免在
font-size 的小字号段落中强依赖text-align-last，微小像素偏差更明显 -
text-align-last: justify在短段落中易造成字间距失控，应限制最小行数（如min-height: calc(1.5em * 2)）
真正起效的前提是：有换行、启用了 justify、目标浏览器支持——三者缺一不可。别在开发工具里只看单行就断定它没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
