中文两端对齐需用text-justify: inter-character触发汉字间拉伸，配合明确宽度、正常换行及伪元素处理末行，否则字距崩坏；移动端和短文本应避免使用。
中文两端对齐时字间距被强行拉大，不是你 CSS 写错了，是浏览器默认不给汉字之间加弹性间隙——text-align: justify 在中文里本质“没词界可撑”，只能靠额外声明触发字符级伸缩。
为什么 text-align: justify 会让中文空隙难看
浏览器对 justify 的实现依赖“断行锚点”：英文有空格，中文没有。结果就是——多行文本中，只有标点、数字、英文混排处能被拉伸，纯汉字行要么不动，要么靠 letter-spacing 硬撑，导致某些字距突然变宽 2–3 倍，阅读吃力。
- Chrome / Edge 默认只在 Unicode 分隔符（如空格、顿号、逗号）之间插入可伸缩间隙
-
text-justify: inter-character才真正启用“汉字间逐字拉伸”，但仅 Chromium 120+、Firefox 110+、Safari 17.4+ 支持 - 没设
lang="zh"时，hyphens: auto不生效，连带影响部分 justify 行为
text-justify: inter-character 怎么用才生效
它不是锦上添花的修饰，而是中文两端对齐的必要开关。但必须和容器宽度、换行能力配合，否则白写。
- 父容器需有明确宽度（如
width: 400px或max-width: 100%），否则无“两端”可对 - 文本得能换行：
word-break: keep-all防止中英文混排时英文被截断；white-space: normal（默认值）不能改成nowrap - 必须显式写在
<td>、<code><p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>等文本容器上，不继承，不冒泡 - 示例：
td, p { text-align: justify; text-align-last: justify; text-justify: inter-character; width: 100%; } - 最稳方案：用
::after伪元素补一个占位但不可见的块p.justify::after { content: ""; display: inline-block; width: 100%; } - 轻量替代：末尾插入零宽空格
（HTML 实体）或\u200B（JS 插入），但注意 Safari 复制时可能漏掉 - 别碰
letter-spacing全局调，它会把所有字距等比放大，破坏字重节奏 - 务必在真机上测不同字号（14px/16px/18px）、不同容器宽度（320px/375px/414px）下的实际表现
- 若内容长度不足 4 行或总字数少于 30，直接放弃
justify，改用text-align: left+ 左右 padding 视觉平衡更可靠 - 表格单元格内用
justify，要额外加vertical-align: top，否则文字垂直位置浮动也会放大间隙感
最后一行还是左对齐？别硬塞空格
规范规定末行默认左对齐，这是行为，不是 bug。手动加 或多个空格不仅不可靠，还会让复制粘贴带出异常字符。
立即学习“前端免费学习笔记（深入）”；
移动端和小字号下特别容易翻车
同一段 CSS，在桌面 Chrome 看着还行，切到 iPhone SE 或系统字体缩放 125% 后，末行突兀左对齐、字距崩坏、甚至整行挤成一团——这不是偶然，是渲染引擎在小空间里放弃精细计算的结果。
真正稳定的两端对齐，从来不是靠一行 text-align: justify 解决的，它需要字体支持、容器约束、文本长度、浏览器版本四者咬合。多数业务场景里，接受末行左对齐，比强求“视觉完美”更省心也更健壮。
