Firefox中text-align-last不生效的典型表现是最后一行仍左对齐或单行无反应，根本原因是必须同时声明text-align: justify和-moz-text-align-last: justify，且需清除末尾空格、确保块级与自然换行。
Firefox 中 text-align-last 不生效的典型表现
设置了 text-align-last: justify，但最后一行仍左对齐；或者单行文本完全没反应。这不是代码写错了，而是 Firefox 对该属性的实现有明确前提：它不支持无前缀的原生 text-align-last，且仅在 text-align: justify 已启用的前提下，通过 -moz-text-align-last 才能触发。
必须同时写 text-align: justify 和 -moz-text-align-last: justify
只加前缀不加主属性，Firefox 会直接忽略；只加主属性不加前缀，在 Firefox 中等于没写。两者缺一不可：
div {
text-align: justify;
-moz-text-align-last: justify; /* Firefox 必须带 -moz- */
text-align-last: justify; /* Chrome/Safari/Edge 可用 */
}
-
text-align: justify是开关，没有它，text-align-last类型的所有值都不起作用 -
-moz-text-align-last在 Firefox 52+ 稳定支持，旧版本（如 45–51）可能需配合text-justify: distribute-all-lines - 不要省略
text-align-last: justify，否则 Safari 16.4+ 或新版 Edge 可能回退到默认 left
Firefox 下内容末尾空格会破坏对齐效果
Firefox 对“最后一行”的判定比 Chrome 更严格：HTML 源码中元素闭合标签前的换行或空格，会被解析为一个空白字符节点，导致浏览器认为“最后一行”只有一个空格，自然无法拉伸。
- 错误写法：
- 正确写法：
- 若用模板引擎（如 Vue/React），需确保插值后不插入多余空白，可用
v-pre或{...}外围加display: inline-block隔离 - 避免在容器内使用
white-space: pre或white-space: pre-wrap，它们会保留空格，干扰 justify 行为
当兼容性要求覆盖 Firefox 45–51 或需要降级兜底时
老版 Firefox 不仅不认 -moz-text-align-last，连 text-align: justify 对单行或短文本的支持也极弱。此时不能依赖 CSS 属性本身，得用结构补救：
- 给容器加
::after伪元素：content: ""; display: inline-block; width: 100%;，强制制造换行，让原文本变成“倒数第二行”，从而被text-align: justify拉伸 - 对纯文本项（如表单项 label），可在 JS 层面对内容末尾加一个零宽空格
\u200B，避免 HTML 空白干扰，又不影响视觉和语义 - 如果内容固定且较短（如“用户名”“密码”），可手动在字间插入空格（如
用 户 名），Firefox 会把每个字当独立词处理，justify 效果更可靠 - 注意：伪元素方案在
word-break: break-word或响应式宽度频繁变化时容易错位，务必测试最小宽度临界点
真正麻烦的不是写多少前缀，而是 Firefox 会把“有没有空格”“是不是块级”“有没有自然换行”全当作硬性条件。哪怕所有 CSS 都写对了，HTML 里多一个看不见的换行，它就放弃拉伸——这点比 Chrome 严格得多，也最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
