text-align-last不能单独实现两端对齐，必须与text-align: justify同时使用，且仅在块级容器、多行文本或伪元素构造的换行上下文中生效；缺少任一条件浏览器均会忽略该属性。
text-align-last 不能单独实现两端对齐，必须和 text-align: justify 同时使用，且只在多行文本或刻意构造的单行上下文中起效。
为什么只写 text-align-last: justify 没反应
浏览器会直接忽略它——text-align-last 是个“依赖型属性”，没有 text-align: justify 就不激活。它不是独立对齐指令，而是对 justify 行为的微调：告诉浏览器“最后一行别按默认规则（比如留空右端），请也拉伸”。
- 只设
text-align-last: justify，而没设text-align: justify→ 完全无效 - 设了
text-align: justify但内容太短、未换行 → 浏览器认为“无中间行可拉伸”，最后一行（即唯一一行）仍按 left 处理，text-align-last不触发 - 容器是
span或display: inline→ 属性被无视，它只作用于块级容器（如p、div、h1）
怎样让单行文本真正两端对齐
关键不是“让它变成最后一行”，而是“让它被当作需要 justify 的行来处理”。真实可用的写法只有两种路径：
- 强制换行制造多行：在文本末尾加一个不可见的
::after占位（content: ""+display: inline-block+width: 100%），这样原文本就变成“倒数第二行”，text-align: justify就会对它拉伸 - 用
text-align: justify+text-align-last: justify组合，并确保：
– 容器有明确宽度（如width: 300px）
– 文本内无末尾空格、换行符、零宽字符（可用.trim()预处理）
– HTML 中标签紧贴写，比如<div>姓名:张三</div>，不要写成<div>\n姓名:张三\n</div>
text-align-last 在 Safari 和旧版 Firefox 中失效怎么办
Safari 15.4+ 才开始支持，iOS Safari 16.4 之前基本不认；Firefox 12+ 支持，但老版本需手动开启 layout.css.text-align-last.enabled（新版已默认开）。实际项目中不能赌支持率。
- 降级方案优先用 JS 检测：
CSS.supports('text-align-last', 'justify')，返回false时改用伪元素撑开法 - 避免用
::after+white-space: pre-wrap这类组合——在响应式容器或中英文混排时容易错位 - 更稳的做法：对表单项等可控场景，把 label 和 value 拆成两个
inline-block元素，用 width 固定 label 区，value 自然右对齐，视觉上就是两端效果
最后一行对齐后标点“悬空”出边框？
这不是 bug，是 justify 拉伸逻辑在小字号或窄容器下的自然表现：浏览器为了填满空间，会放大字间距，末尾标点可能被推到容器右边界之外。
- 加
hyphens: auto可缓解长单词导致的间距失控 - 慎用
text-align-last在font-size: 12px以下的段落——像素级偏差会被放大 - 如果容器有
transform或will-change，某些 Chrome 版本会跳过text-align-last渲染，建议移除或改用contain: layout
真正起效的三个硬条件：容器是块级、启用了 text-align: justify、浏览器支持该属性——缺一不可。别在调试时反复检查 CSS 语法，先确认这三点是否都满足。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
