中文实现两端对齐需同时设置text-align: justify和text-justify: inter-character，且容器为块级、文本至少两行；末行对齐需伪元素干预，兼容性受限于浏览器版本。
text-align: justify 在中文里基本没效果，除非你同时写上 text-justify: inter-character，并且确保文本至少两行、容器宽度足够、浏览器版本达标。
为什么只写 text-align: justify 没用
浏览器默认按「单词」为单位拉伸，而中文词与词之间没有空格，text-align: justify 找不到断点，就直接跳过拉伸逻辑——结果看起来和 text-align: left 完全一样。
- 常见错误现象：
text-align: justify写了但文字完全不变化；换行后末行依然左对齐；甚至出现诡异的超大字间距（其实是浏览器强行在单字间塞空隙） - 必须成对出现：
text-align: justify+text-justify: inter-character，缺一不可 -
text-justify: inter-word对中文无效，别乱填 - 该属性不继承，子元素要显式设置或用
inherit
怎么让末行也两端对齐
浏览器默认不拉伸最后一行，这是规范行为，不是 bug。想破例，得手动干预。
- 推荐方案：用
::after伪元素补一行空白内容，并设为display: inline-block; width: 100% - 不推荐方案：
text-align-last: justify—— Safari 当前（2026年4月）仍不支持，兼容性差 - 注意：如果容器太窄（比如单行只有 2–3 个汉字），即使加了伪元素，浏览器也可能因无足够调整空间而放弃拉伸
浏览器兼容性与实际可用性
别指望它在所有环境都能跑通。当前（2026年4月）真实支持情况如下：
- Chrome / Edge 104+、Firefox 91+、Safari 16.4+ 支持
text-justify: inter-character - 旧版 Safari 和所有 IE 版本完全忽略
text-justify，只当没写 - 移动端 WebView 表现取决于内核版本，iOS 16.4 以下大概率失效
- 若需降级兼容，可配合 JavaScript 检测支持性， fallback 到
text-align: left或手动插入零宽空格
使用场景与性能提醒
这不是一个随手就能开的开关。它适合对排版精度有要求的场景，比如新闻正文、电子书阅读器、印刷风格网页。
- 性能影响：开启后浏览器需额外计算每个字符间距，长段落滚动时可能轻微卡顿（尤其低端 Android 设备）
- 可访问性风险：屏幕阅读器对拉伸后的字符间距无感知，但某些辅助技术可能误判语义分隔
- 别在表单标签、按钮文案、弹窗提示里硬套——这些地方优先保证清晰可读，而非视觉对齐
最易被忽略的一点：哪怕所有 CSS 都写对了，只要父容器用了 display: flex 或 display: grid，且子元素是内联元素（如 span），text-align 就不会生效——因为 text-align 只作用于块级上下文内的内联内容。这时候得先确保文本容器是 block 或 inline-block，再谈对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
