text-align-last 不能单独让单行文本两端对齐，必须与 text-align: justify 同时设置，且依赖块级容器、自然换行、无末尾空白等前提；单行即末行，justify 默认不拉伸首末行，故需两者协同生效。
text-align-last 不能单独让单行文本两端对齐——它只在 text-align: justify 生效的前提下，**修正最后一行的对齐行为**。而单行文本天然就是“最后一行”，所以必须同时设置两者，且要满足块级容器、自然换行等前提。
为什么 text-align: justify 对单行没反应？
text-align: justify 的设计逻辑是：仅对「被换行打断的中间行」做拉伸，首行和末行（单行即首末同行为）默认不处理。浏览器不会为单行插入额外空格来撑开，所以看起来完全没变化。
如何用 text-align-last: justify 搞定单行？
关键不是加一个属性，而是构造出「它能起作用的上下文」：
- 容器必须是块级元素（如
div、p），不能是span或display: inline - 必须同时声明：
text-align: justify+text-align-last: justify - 避免末尾隐藏空白：HTML 中
<div>姓名：张三</div>后不要换行或空格，否则浏览器可能把那个空格当作“最后一行内容”，导致拉伸失败 - Firefox 需加前缀：
-moz-text-align-last: justify - IE 和旧版 Safari 基本不支持，iOS Safari 16.4 之前也无效
更稳妥的兼容方案：伪元素撑开
当目标环境不可控（比如要兼容 iOS 15 或微信内置浏览器），推荐用 ::after 插入不可见但可拉伸的内容：
label {
display: inline-block;
width: 200px;
text-align: justify;
white-space: pre-wrap;
}
label::after {
content: "";
display: inline-block;
width: 100%;
height: 0;
}
这个技巧本质是「骗」浏览器：让真实文本变成倒数第二行，::after 占据最后一行并撑满宽度，从而触发 justify 对上一行的拉伸。但要注意：
立即学习“前端免费学习笔记（深入）”；
-
white-space: pre-wrap必须保留，否则换行符会被忽略 - 如果
label内含img或其他内联元素，它们之间的空白会干扰对齐，建议设font-size: 0在父容器再重置子元素字体 - 响应式缩容时，伪元素可能错位，需配合
min-width或媒体查询微调
中文场景下要特别小心
纯中文单行用 justify 拉伸，结果往往是每个字被平均拉开，像「数 据 结 构」一样生硬。这不是 bug，是浏览器按 Unicode 字符切分的正常行为。此时：
- 别强求两端对齐——
text-align: left通常更可读 - 若必须对齐，可手动插入零宽空格（
）或软连字符（）辅助断点，但需后端或构建时预处理 -
text-justify: inter-character仅 Firefox 支持且需lang="zh"，实际项目中基本不用
flex 但忘了 align-items: baseline 导致视觉错位。先确认是不是 CSS 该管的事，再动手。 
