text-align: justify 要生效需满足三条件：容器有明确宽度、文本足够长能换行、中文需加 text-justify: inter-character；单行、窄容器或无分词时无效。
text-align: justify 能让多段落左右两端对齐，但**不是设了就生效**——它只在满足特定条件时才真正拉伸文字间距。
为什么 p 加了 text-align: justify 没变化？
常见现象是：单行段落、窄容器、中文文本全都不动。根本原因有三个：
-
p是块级元素（默认满足） - 容器必须有明确宽度（比如
width: 600px或父容器是定宽 flex 项），否则“两端”无参照 - 文本得足够长、能自然换行——单行文本永远不拉伸，justify 对它无效
例如：<p style="text-align: justify">你好</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 看不出效果，不是写错了，是它压根没第二行可对齐。
中文段落怎么让 text-align: justify 真正起作用？
Chrome/Edge 默认只在空格、连字符等“词界”处插入间隙，而中文没有天然分词，所以字符间不加空隙，整段看起来和 left 一样。
- 加
text-justify: inter-character：强制在每个汉字间插入可伸缩空白，对中文最直接有效 - 注意兼容性：仅 Chromium 120+ 支持；Firefox 128 忽略；Safari 完全不支持
- 稳妥写法是同时写：
text-align: justify; text-justify: inter-character;，现代浏览器立刻见效，老浏览器退回到基础 justify 行为
最后一行怎么也撑满？别只靠 text-align-last: justify
text-align-last: justify 必须和 text-align: justify 联用，且只对多行文本的最后一行生效——单行、没换行、没启用 justify，它就完全不工作。
- 它在 Chrome/Edge/Firefox 都支持，Safari 16.4+ 开始支持，但 iOS Safari 15.4 前不支持
- 别对短段落强行用它：比如两行文本，第二行只有两个字，拉伸后字距夸张，反而难看
- 更可控的办法是手动干预断行点，比如在合适位置插入
<wbr></wbr>，或用零宽空格增加换行机会
别踩这些坑
align 属性在 HTML5 中已废弃，<p align="justify"></p> 在所有现代浏览器里都无效，必须用 CSS。
-
text-align控制的是段落内部文字对齐，不是p自身在页面中的位置（那得靠margin、flex或grid） - 大量启用
text-justify: inter-character可能轻微影响渲染性能，尤其移动端长文，建议只在关键排版区域启用，不要全局设在body或p上 - 表格单元格内两端对齐，推荐统一写：
table td, table th { text-align: justify; text-align-last: justify; word-break: keep-all; }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
