HTML中p文本两端对齐 HTML中p标签text-align:justify应用-html教程-PHP中文网

text-align: justify 对生效需同时满足：为块级元素、容器有明确宽度、文本足够长能换行；中文需加 text-justify: inter-character 才显效果，末行对齐用 text-align-last: justify。

html中p文本两端对齐 html中p标签text-align:justify应用

text-align: justify 对 `<p></p>` 标签生效的前提条件

text-align: justify 要在 <p></p> 上起作用，必须同时满足三个硬性条件：

<p></p> 是块级元素（默认就是，没问题）
容器有明确宽度（比如设置了 width、max-width 或父容器是定宽 flex/grid 项），否则“两端”无从谈起
文本足够长、能自然换行（单行文本永远左对齐，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/skill8272" title="anything-to-html"><img src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a> <p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 看不出变化——不是写错了，是它只有一行，没断点可拉伸。

中文段落加 justify 几乎没效果？这是浏览器行为，不是 bug

Chrome/Edge 默认只在 Unicode “单词分隔符”（如空格、连字符）之间插入间隙，而中文没有天然词界，所以字符间不加空隙，整段看起来和 left 没区别。
这不是你漏写了什么，是规范如此。
要改善中文表现，必须叠加新属性：

text-justify: inter-character：强制在每个字符间插入可伸缩空白，对中文最直接有效
仅 Chrome/Edge 120+ 支持；Firefox（v128）忽略该声明；Safari 完全不支持
所以稳妥写法是：text-align: justify; text-justify: inter-character;，现代 Chromium 用户立刻见效，其他浏览器退回到基础 justify 行为

最后一行总是左对齐，怎么让它也撑满？

text-align: justify 默认对最后一行不做拉伸，这是 CSS 规范定义的行为。
想让末行也两端对齐，有两个实际可用的路子：

加 text-align-last: justify：Chrome/Edge/Firefox 都支持（Safari 16.4+ 开始支持），但要注意它只影响最后一行，别误用在单行上
控制内容长度或断行位置：比如在合适位置插入或 <wbr></wbr>，让换行点更可控，避免末行只剩一两个字被孤立

别用 text-align-last: justify 去“修复”短段落——如果整段就两行，第二行只有三个字，强行拉伸反而难看。