text-align: justify 失效是因为未满足三个前提：块级元素、容器有明确宽度、文本能自然换行；中文需加text-justify，最后一行需text-align-last: justify，单行可用::after伪元素模拟。
text-align: justify 为什么没反应
不是写错了，是它根本没触发条件。浏览器对 text-align: justify 有三个硬性前提：<p></p> 必须是块级元素（默认满足）、容器要有明确宽度（比如 width: 300px 或父容器是定宽 flex 项）、文本必须能自然换行（单行永远不拉伸）。常见失效场景：<p style="text-align: justify">你好</p> 看不出变化——因为就一行，没有“两端”可对齐。
中文两端对齐必须加 text-justify
英文用 text-align: justify 就能拉伸单词间距，但中文默认不生效。必须补上 text-justify: inter-ideograph（IE/Edge 旧版）或 text-justify: inter-character（现代标准）。否则汉字会原样堆在左边，像没写一样。注意：text-justify 是非标准属性，仅部分浏览器支持，且不能单独使用，必须和 text-align: justify 同时存在。
最后一行还是左对齐？补上 text-align-last
text-align: justify 默认只拉伸中间行，最后一行仍按 left 处理。要让它也两端对齐，必须加 text-align-last: justify，但这个属性不是独立生效的：它只在多行、块级、现代浏览器中起作用，且必须与 text-align: justify 联用。漏掉任一条件，浏览器直接忽略该声明。例如：<p style="text-align: justify; text-align-last: justify"></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> —— 这才是完整写法。
单行文本怎么强制两端对齐
单行无法触发 justify 逻辑，但可以用伪元素“骗过”浏览器：::after 插入一个占满整行的空块，让原文本变成“倒数第二行”。实操写法如下：
div.justify-single {
text-align: justify;
}
div.justify-single::after {
content: "";
display: inline-block;
width: 100%;
}
关键点：width: 100% 必须配合 display: inline-block，否则无效；容器本身仍需有明确宽度，否则 100% 无参照。
真正难的不是写哪几行 CSS，而是判断当前文本是否满足换行前提、浏览器是否支持 text-justify、以及要不要为 IE 做降级处理——这些细节一旦漏掉，整段样式就等于白写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
