text-align: justify 对单行文本无效，因其仅拉伸换行后的中间行字间距；单行即首末行为同一行，故默认跳过。

text-align: justify 对单行文本无效——这是浏览器的默认行为，不是你写错了。

为什么 text-align: justify 不管用？

justify 的设计逻辑是：只对「被换行打断的中间行」拉伸字间距，首行和末行（单行即首末同行为）默认跳过。所以哪怕你只写一行字，text-align: justify 也不会插入额外空格去撑开它。

常见错误现象：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 加了 text-align: justify，但文字依然左对齐
• 用 text-align-last: justify 单独设置，完全没反应
• 在 iOS Safari 15.4 之前或旧版安卓 WebView 中，伪元素 hack 渲染为空白或错位

靠谱的两种实现方式及取舍

目前只有两个主流方案真正落地可用，区别在于兼容性与维护成本：

• 伪元素 ::after hack（推荐优先尝试）：.single-line { text-align: justify; } + .single-line::after { content: ""; display: inline-block; width: 100%; }。它骗浏览器“这其实是多行”，从而触发 justify 行为。Chrome/Firefox/Safari 17.4+ 稳定，但需注意容器必须有明确宽度（如 width 或 max-width），否则响应式下易失控
• text-align-last: justify（语义更正，但慎用）：必须和 text-align: justify 同时出现，且仅在现代浏览器生效。iOS Safari 15.4–16.x 有渲染 bug；旧版 Android WebView 基本不识别。若项目已放弃 IE 和低版本移动 WebView，可考虑此写法，但别单独依赖它

移动端和可访问性容易踩的坑

小屏上字间距被强行撑开是最常见的视觉崩坏点：

• 容器宽度小于 6 个汉字时（约 120px），中文字符间距可能突变，文字发散失衡
• 用 JS 动态插入 \u200B 或 \u00A0 辅助对齐时，务必加 aria-hidden="true"，否则屏幕阅读器会读出“零宽空格”或“不间断空格”
• 标题、按钮、表单标签这类强调语义清晰的短文本，硬套两端对齐反而降低扫描效率——这不是技术问题，是排版合理性问题

真正麻烦的不是怎么写出来，而是判断该不该用：当内容长度不可控、容器宽度动态变化、或文本承载语义权重高时，letter-spacing 手动微调或干脆左对齐，往往比强上 justify 更稳妥。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！