中文段落加text-align: justify无效，因浏览器仅在空格等断点拉伸，而中文无天然词界；需配合text-justify: inter-character与lang="zh"，英文部分则需hyphens: auto和word-break: break-word协同控制。
中文段落加 text-align: justify 没反应，英文部分却被拉得稀烂——这不是你 CSS 写错了，是浏览器对中英文的对齐逻辑根本不同。
为什么中英文混排时 text-align: justify 表现割裂
浏览器处理两端对齐时，只在 Unicode 标记为「单词分隔符」的位置（如空格、连字符）插入弹性间隙。英文天然有空格分词，所以能拉伸词间距；中文无内置断点，字与字之间默认不参与拉伸。结果就是：英文被撑开、中文堆成一团、末行裸露左对齐。
常见错误现象：
-
text-align: justify单独写在混排段落上，中文部分几乎没变化 - 容器宽度窄 + 英文长单词（如
responsibility），导致单行词间距爆炸 - 没设
lang="zh"或lang="en"，hyphens: auto和text-justify: inter-character静默失效
混排段落必须同时启用中英两套机制
想让中英文都自然对齐，不能只靠一个 text-align: justify。必须分层控制：
立即学习“前端免费学习笔记（深入）”；
- 中文部分：加
text-justify: inter-character+ 父级或自身设lang="zh"，强制按字均匀分配间距 - 英文部分：配
hyphens: auto+word-break: break-word，避免长词破坏行宽节奏 - 两者共存前提：容器要有明确
width或max-width，且内容足够换行（至少 3 行）
正确写法示例：
<p lang="zh" style="text-align: justify; text-justify: inter-character; hyphens: auto; word-break: break-word; max-width: 600px;"> 这是一段中英文混排文本（English text like “user interface design” should wrap smoothly）。 </p>
text-align-last: justify 能否解决末行突兀？
它只影响最后一行，且仅在现代浏览器（iOS Safari 14.5+、Chrome 120+）中生效。但混排场景下慎用：
- 中英文混排时，
text-align-last: justify对中文无效（仍需text-justify: inter-character） - 若末行只有 1–2 个英文单词 + 几个汉字，浏览器无法合理分配间距，反而更松散
- 更可靠的做法是：在段末加零宽空格
，或用伪元素::after { content: ""; display: inline-block; width: 100%; }强制 justify 生效范围覆盖末行
按钮、表格单元格等受限场景怎么微调
原生 <button> 和 <td> 不支持 text-justify: inter-character，且 text-align: justify 在单行内基本无效：
-
<button>：改用<div role="button">+ 显式width+text-align: justify；或用letter-spacing: 0.04em手动微调（限 2–4 字） -
<td>：必须单独给单元格设lang="zh"、text-align: justify、text-justify: inter-character和width（不能只靠<table>继承） - 所有场景都要避开
word-break: break-all——它会割裂词语，比如把“上海市”拆成“上海 市”，语义全毁
真正难的不是加属性，而是判断哪一段该用 inter-character、哪一段该降级为 letter-spacing、哪一段干脆放弃 justify 改用 left + text-indent——这些边界，得看内容长度、设备宽度、用户阅读习惯，没法一劳永逸。
