text-align-last 仅在 text-align: justify 且文本自动换行时生效，依赖父容器有明确宽度、中日文需 text-justify: inter-character、浏览器兼容性差（如旧版 safari/firefox），常用兜底方案为伪元素插入零宽空格。
text-align-last 能解决两端对齐时最后一行左对齐（或默认对齐）的视觉断裂问题，但**它不总是生效，且浏览器兼容性、父容器设置、换行机制都会直接影响效果**。
为什么 text-align-last 有时完全没反应
最常见原因是：该属性仅在 text-align 为 justify 时才起作用；若文本未发生自动换行（比如单行、无空格、white-space: nowrap），或内容不足一行，text-align-last 不会被应用。
-
text-align: justify必须显式设置，不能靠继承或默认值 - 块级容器需有明确宽度（如
width或max-width），否则浏览器无法计算“两端对齐”的基准 - 若文本内全是中文、日文等无空格字符，且未启用
word-break: break-all或overflow-wrap: break-word，可能根本不会换行，导致没有“最后一行”可对齐 - Firefox 对
text-align-last的支持要求更严格——必须配合text-justify: inter-character才能在中日文场景下合理拉伸
text-align-last 的可用值和实际表现差异
它的合法值包括 auto、start、end、left、right、center、justify，但行为并非完全直观：
-
auto（默认）：多数浏览器对最后一行回退到start（即左对齐），不是你想要的“保持两端” -
justify：强制最后一行也拉伸填满，但仅当该行有至少两个可断行点（如空格、标点）时才真正生效；纯中文段落即使设了justify，也可能因无可插入间隙而退化为左对齐 -
center或right在小屏幕或短文本中更可控，适合标题类场景，但会破坏整体justify的节奏感
中英文混排下的典型失效场景与绕过方式
例如一段含英文单词、中文和破折号的说明文字，在 Safari 或 Chrome 中设了 text-align: justify; text-align-last: justify，最后一行仍左对齐——这是因为浏览器默认按“单词边界”对齐，而中文之间无天然分隔符。
- 加
text-justify: inter-word对英文有效，但对中文无效；改用inter-character可让中日文按字间距拉伸（Chrome/Edge 支持，Firefox 需同时设text-align-last: justify） - 更稳妥的兜底：用伪元素
::after在最后一行末尾插入一个零宽空格\200B并设width: 100%，再结合display: inline-block强制撑开（适用于已知最多两行的短文本） - 服务端或 JS 预处理：在每行末尾（除最后一行）插入
white-space: pre-wrap保留，本质是把“对齐控制权”从浏览器交给开发者
移动端适配时容易忽略的细节
iOS Safari 对 text-align-last 的支持从 iOS 15.4 才开始稳定，且在 font-size 或启用了 <code>-webkit-text-size-adjust: none 的页面中，可能触发渲染降级，表现为最后一行突然缩进或错位。
- 务必在真机上验证，模拟器常误报成功
- 避免在
flex容器子项或grid单元格中依赖它——这些上下文中text-align-last行为更不可控 - 如果使用 CSS-in-JS（如 Emotion），注意某些框架会自动添加 vendor prefix，但
text-align-last的-webkit-前缀在现代浏览器中已废弃，加了反而可能干扰解析
真正棘手的不是语法写不对，而是你得先确认：这一行是不是被浏览器判定为“最后一行”——它可能因为换行策略、字体度量、甚至系统语言设置而动态变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
