CSS文本两端对齐设置方法

想让中文文本真正实现CSS两端对齐？光写 `text-align: justify` 根本没用——浏览器默认按单词断行，而中文无空格分隔，导致该属性形同虚设；必须搭配 `text-justify: inter-character` 才能强制按字符拉伸，且需满足块级容器、至少两行文本、足够宽度及现代浏览器（Chrome/Edge 104+、Firefox 91+、Safari 16.4+）等硬性条件；末行对齐还得靠伪元素巧妙“骗过”浏览器规范；兼容性差、性能有损耗、可访问性存隐患，因此它绝非万能开关，仅推荐用于新闻正文、电子书等对排版精度要求严苛的专业场景，日常开发中务必谨慎权衡。

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，再谈对齐。

本篇关于《CSS文本两端对齐设置方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！