text-align: justify 在中文中常“失效”是因为浏览器依赖可断行点，而中文无默认空格，需配合 text-justify: inter-character 或 hyphens: auto（配合 lang="zh"）才有效；纯 CSS 两端对齐不可靠，高保真场景建议结构化处理。
text-align: justify 是唯一可靠的方式，但中文两端对齐效果差、易出空格断裂，必须配合其他 CSS 才能实用。
为什么 text-align: justify 在中文里经常“失效”
浏览器对 text-align: justify 的实现依赖于「可断行点」：英文按单词空格断，中文默认无空格，所以多数浏览器（尤其 Chrome 和 Safari）不会主动在汉字间插入弹性间距，导致最后一行明显左对齐、整段看起来没“撑开”。
更糟的是，某些字体（如部分 Web 字体或系统等宽字体）会完全忽略该声明。
常见错误现象：<p style="text-align: justify;">这是一段中文文本</p> 渲染后和 left 几乎一样。
text-align: justify 必须搭配 text-justify 或 hyphens 才有效
仅设 text-align: justify 不够，需显式启用中文断行策略：
• 对现代浏览器（Chrome 120+、Firefox 110+、Safari 17.4+），加 text-justify: inter-character; 强制按字断行并拉伸间距
• 若支持 hyphens: auto;（需配合 lang="zh" 属性），部分浏览器会在语义边界尝试断词（但中文支持仍弱）
• 必须设置 lang="zh" 到 或父容器，否则 hyphens 和部分 text-justify 行为不触发
• 示例：
<p style="text-align: justify; text-justify: inter-character;" lang="zh">这是一段用于演示两端对齐的中文段落。它需要足够长度才能体现效果。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
替代方案：用 letter-spacing + text-align: justify 模拟（慎用）
当 text-justify: inter-character 兼容性不足（如旧版 Edge 或 iOS Safari 16-），可退而求其次手动微调：
• 只对多行段落使用，单行无效
• 配合 text-align: justify 后，用 letter-spacing: 0.05em; 稍微扩大字距，视觉上“撑满”更自然
• 但不能设过大，否则破坏可读性；且需用 @supports 隔离，避免覆盖已支持原生 justify 的环境
• 容易踩的坑：letter-spacing 会影响所有字符（包括标点），句号、顿号后会多出异常间隙；建议只在 text-justify 不可用时作为降级手段
立即学习“前端免费学习笔记（深入）”；
真正可靠的两端对齐，靠结构而非纯 CSS
对出版级排版要求（如电子书、PDF 导出、长文阅读页），纯前端 justify 始终不稳定。更务实的做法是：
• 用 <div class="justified"> 包裹段落，在 JS 中按行宽切分文本并插入零宽空格（<code>）或 （仅限关键位置）
• 或服务端预处理：将长段落拆成带 word-break: break-word; 和 text-align: justify; 的多 <span></span>，每行末尾加弹性 <span style="display:inline-block; width:100%"></span>
• 这类方案绕开了浏览器渲染限制，但代价是增加 DOM 复杂度和维护成本——简单页面没必要，高保真场景值得投入
真正麻烦的不是怎么写那行 text-align: justify，而是得判断当前项目是否真的需要它：多数网页正文用 left + 合理 line-height 和 max-width 更清晰；只有法律文书、报纸专栏、印刷导出等场景才值得深挖兼容细节。
