text-align: justify对中文无效，因浏览器仅在空格等单词分隔符处插入弹性间距，而中文无天然断点；需配合text-justify: inter-character、lang="zh"及明确容器宽度才可实现字级两端对齐。
text-align: justify 能让文本两端对齐，但中文段落里它大概率“没反应”——不是你写错了，是浏览器默认不给汉字之间加可伸缩间距。
为什么中文加了 text-align: justify 还是左对齐
浏览器只在 Unicode 定义的「单词分隔符」（比如空格、连字符）之间插入弹性空白。中文没空格，所以几乎不拉伸；单行文本永远不生效；容器没设 width 或 max-width，“两端”就无从谈起。
- 常见现象：
<p style="text-align: justify;">你好世界</p>渲染后和text-align: left几乎一样 - 中英文混排时，英文正常撑开，中文部分挤成一团
- 某些 Web 字体（尤其等宽字体）会直接忽略该声明
- Safari ≤15.4 和 Firefox ≤127 完全不支持
text-justify，也不触发汉字级拉伸
text-justify: inter-character 是什么，怎么用才有效
它是目前最干净的解法，强制在每个字符（包括汉字、标点）之间插入可伸缩空白，但必须满足三个硬条件：
- 必须配合
text-align: justify使用，单独写text-justify不生效 - 父容器或
必须带lang="zh"，否则 Safari 可能静默失效 - 仅 Chrome 120+ / Edge 120+ / Firefox 110+ / Safari 17.4+ 支持；Firefox 128 仍忽略该声明
正确写法示例：<p lang="zh" style="text-align: justify; text-justify: inter-character;">这是一段中文</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
最后一行怎么也撑满宽度
规范规定最后一行默认左对齐，这不是 bug。想让它也两端对齐，唯一可靠方式是加 text-align-last: justify，但它只在 text-align 为 justify 时生效，且兼容性更差：
- Safari ≤15.4、旧版 iOS WebView、大部分 Android 浏览器直接无视
- 别用伪元素
::after补display: inline-block; width: 100%—— 屏幕阅读器可能误读为额外内容 - 轻量做法：JS 动态在中文字符间插入
（零宽空格），但复制粘贴时可能带出异常字符 - 更稳妥的做法是降级：媒体查询检测小屏（
max-width: 480px）时强制text-align: left
哪些场景千万别硬上 justify
纯 CSS 的 text-align: justify 在中文排版里始终不稳定，尤其以下情况极易翻车：
- 表格单元格（
<td>）以外的 flex 容器里——子元素默认不占满父宽，<code>justify常无效 - 中英文混排含长 URL 或拼音串，会撑破行宽或崩坏断行
- 移动端小屏 + 小字号 + 高字距拉伸，文字容易发散或重叠
- 屏幕阅读器把拉伸间隙当停顿，影响可访问性
真正高保真需求（如电子书、PDF 导出），基本都靠服务端预处理或 JS 动态切分 + 插入零宽空格，而不是纯 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
