text-align: justify单独对中文基本无效，因浏览器默认只在空格分隔的单词间拉伸间距，而中文无天然断点，需配合text-justify: inter-character、多行、块级容器及明确宽度才生效。
只写 text-align: justify 对中文基本无效，必须配合 text-justify: inter-character 且满足多行、块级、宽度足够等前提条件。
为什么 text-align: justify 单独写没反应
浏览器默认按「单词」找断点拉伸间距，而中文词与词之间没有空格，text-align: justify 找不到可调节的锚点，直接跳过拉伸逻辑——结果和 text-align: left 完全一样。
- 常见错误现象：
text-align: justify写了但文字完全不变化；换行后末行依然左对齐；甚至出现超大字间距（其实是浏览器强行在单字间塞空隙） - 英文能部分生效，是因为空格天然提供分词锚点；中文、日文、韩文等表意文字必须显式启用字符级拉伸
-
text-justify: inter-word对中文完全无效，别填 -
text-justify不继承，子元素要显式设置或用inherit
中文两端对齐的最小可行配置
必须成对出现：text-align: justify + text-justify: inter-character，缺一不可。同时确保容器是块级、有明确宽度、文本至少撑出两行。
- 基础写法示例：
.justify-cn { text-align: justify; text-justify: inter-character; /* Firefox 兼容写法 */ -moz-text-justify: inter-character; } - 容器必须是块级（如
p、div），行内元素（如span）不生效 - 文本内容不能太短（比如少于 6–8 字），否则浏览器会把字间距撑得极不自然
- 避免整段是连续无空格字符串（如长 URL、拼音串），这类内容
justify无法拆分
怎么让最后一行也两端对齐
浏览器规范规定末行默认左对齐，这不是 bug，而是标准行为。想破例，得手动干预。
- 推荐方案：用
::after伪元素补一行空白内容.justify-hack::after { content: ""; display: inline-block; width: 100%; height: 0; visibility: hidden; } - 不推荐方案：
text-align-last: justify—— Safari 当前（2026年4月）仍不支持，旧版 Android WebView 兼容性差 - 零宽空格（
或\u200B）可作为兜底手段，但需服务端或 JS 动态插入，纯 CSS 难以稳定控制 - 若文本被
white-space: nowrap锁死换行，text-align-last直接失效
中英文混排与性能/兼容性注意点
中英文混排时，text-align: justify 的行为差异明显，容易导致末行错位或间距突变。
- 英文建议搭配
hyphens: auto（需设lang="en"）和word-break: break-word，防止长单词破坏对齐节奏 - 中文慎用
letter-spacing模拟对齐——它会全局影响字距，小屏下易导致文字发散或重叠 -
text-justify: distribute在部分旧版 IE 中表现更稳，但现代浏览器支持有限，优先用inter-character - 移动端 iOS Safari 对
text-justify支持较晚，iOS 15.4+ 才开始稳定识别，低于此版本建议降级为左对齐
最常被忽略的一点：中文无空格连写时，text-align: justify 默认不拆字，末行对齐几乎无效——必须配合 word-break: break-all 或 overflow-wrap: break-word，否则所有技巧都只是在做无用功。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
