如果你已经给段落加上了 text-align: justify，但右侧文字仍然像左对齐一样参差不齐，先别急着怀疑浏览器。两端对齐在 CSS 里并不是一个全局开关，它对元素类型、文本行数、断行规则甚至父级布局都有要求。
下面从最常见的几个失效原因讲起，把对应的修复代码也一并给出。
一、先确认作用对象是不是块级容器
先来看一个最容易被忽略的问题：text-align 控制的是块级容器内部的行内内容水平对齐。它需要容器有明确的宽度约束，才能决定把多余的空间分配到词与词之间。如果样式写在了 <span>、<a> 这类行内元素上，元素本身宽度由内容撑开，没有可分配的空间，两端对齐自然不会产生任何视觉变化。
正确做法是把 text-align: justify 设置在 <p>、<div> 或 <article> 等块级元素上。同时容器宽度不能是无限伸展的，通常需要设置 width: 100%、max-width 或由父级布局给出约束。下面的代码可以让一个段落具备两端对齐的基础条件。
.article p {
width: 100%;
text-align: justify;
}
这里用 width: 100% 保证 p 元素占满父容器，文本在换行后每行有足够空间被拉伸到右边缘。如果父容器本身没有固定宽度，p 的 100% 也就没有参考值，justify 同样会显得无效。
二、单行和最后一行需要 text-align-last
即使容器是块级，文本也确实换行了，最后一行仍然不会两端对齐。这是排版规范的一部分：两端对齐只处理除最后一行之外的完整行，因为最后一行内容不足，强行拉开会显得松散。单行文本在浏览器看来其实就是最后一行，所以只设置 text-align: justify 没有任何效果。
如果确实需要把单行标题、按钮文字或表单标签的左右两端撑开，可以使用 text-align-last: justify。这个属性专门控制最后一行以及只有一行时的对齐方式。为了兼容旧版 Safari，建议同时加上 -webkit-text-align-last。
.single-line {
text-align: justify;
text-align-last: justify;
-webkit-text-align-last: justify;
}
但要注意，text-align-last: justify 会强制拉伸最后一行，如果该行文字特别少，例如只有两个汉字，字符之间会出现很大的空白。这种效果在视觉上不一定理想，通常更适用于标签、表头等短文本场景，而不是普通段落。
三、长串英文或数字会破坏右侧对齐
在中文内容里，只要出现订单号、URL、接口字段名或一整段英文，两端对齐很容易失效。浏览器默认的断行规则是按单词换行：一个没有空格的连续字符串被视为不可拆分的整体。如果当前行放不下这个长串，它会被整体挪到下一行，上一行的末尾就会留下一块明显的空白。
解决这个问题需要改变断词策略。word-break: break-all 允许在任意字符之间断行，包括英文单词中间；overflow-wrap: anywhere 则更温和一些，只有当单词无法完整放入当前行时才拆开。对于中文文章里的长数字、长英文标识符，可以使用 overflow-wrap: anywhere 或 word-break: break-all，再配合 text-align: justify，就能减少右侧缺口。
.mixed-text {
text-align: justify;
overflow-wrap: anywhere;
word-break: break-all;
}
如果你希望英文单词本身尽量保持完整，只在超长字符串处断开，可以把 word-break 保留为默认值，只添加 overflow-wrap: anywhere。反过来，如果页面里大量出现 URL 或代码字符串，直接使用 word-break: break-all 会更干脆。
四、父容器是 Flex 或 Grid 时 justify 不管子项排列
还有一种常见场景：开发者给 <div class="row"> 设置了 display: flex，然后给同一个容器加 text-align: justify，期望两个子卡片在横向上两端对齐。结果发现子项仍然挤在一起。这是因为 text-align 只负责行内内容的对齐，而 flex item 和 grid item 属于布局级别的盒子，不受文本对齐属性控制。
在 Flex 布局里，要让子项在主轴上分散到两端，应该使用 justify-content: space-between；如果是 Grid 布局，可以通过列轨道和 justify-content 来分配空间。比如下面这个例子，两个卡片会分别贴在父容器左右两侧。
<div class="row"> <div class="card">左侧卡片</div> <div class="card">右侧卡片</div> </div>
.row {
display: flex;
justify-content: space-between;
}
.card {
width: 48%;
}
如果你需要的是 flex 子项内部的文本两端对齐，仍然可以在子项上设置 text-align: justify，前提是子项本身是一个块级格式化上下文，且有宽度约束。两个概念不要混用：justify-content 处理子项之间的空间，text-align 处理子项内部文字的空间。
五、text-justify 和浏览器差异补充
除了上面提到的属性，CSS 中还有一个 text-justify 属性，用来细粒度控制两端对齐时具体拉伸哪些部分。它可以取 auto、inter-word、inter-character 等值。不同浏览器对 text-justify 的支持并不一致，Chrome 和 Firefox 的行为也存在差异，因此它更适合作为辅助优化，而不是核心修复手段。
对于中文排版，有些资料会提到 text-justify: inter-ideograph，它表示按表意字符的间距来调整对齐。不过这部分标准在浏览器中的支持并不稳定，实际项目里优先使用 text-align: justify、text-align-last 和 overflow-wrap 已经可以解决大多数问题。真正遇到复杂的中文标点悬挂、两端对齐与标点压缩时，还需要结合具体浏览器做兼容测试。
排查 text-align: justify 失效时，可以按照这样的顺序：先看目标元素是不是块级容器，再看文本是否只有一行或最后一行，然后检查是否存在长串英文数字，最后确认父容器是不是 Flex 或 Grid 布局。把这些条件逐一排除，基本就能找到 justify 看似不起作用的准确原因。
CSS两端对齐text-align justifytext-align-last修改时间：2026-09-19 12:48:41