text-align: justify 对中文段落单独使用无效，需配合 text-align-last: justify 或伪元素补位；因中文无天然断点，浏览器仅对多行且有换行机会的文本拉伸，单行或连续无空格中文不触发。
text-align: justify 单独用在中文段落上基本无效，必须配合 text-align-last: justify 或伪元素补位，否则最后一行永远左对齐。
为什么 text-align: justify 看起来没反应
浏览器只对“有换行机会”的多行文本做拉伸；单行、无空格的连续中文（如“数据结构算法题解”）、或容器过窄导致无法分词时，justify 完全不触发。中文没有天然断点，text-align: justify 默认只在英文单词间加空隙，字与字之间不动。
- 确保段落至少两行以上（可加固定
width和较小font-size测试） - 避免末尾带换行符或空格——
<p>文字</p>\n中的换行会被当成“最后一行只剩空白” - 不要在
<p></p>里嵌套未闭合的<span></span>或带空格的内联标签，会干扰行判定 - flex 容器中的子元素设
text-align: justify通常失效，因宽度未撑满，得先设width: 100%或改用justify-content
让最后一行也两端对齐：text-align-last 必须配对使用
text-align-last: justify 不是独立开关，它只在 text-align: justify 已启用的前提下才生效。Chrome/Firefox 要求两者同时存在，仅写后者毫无作用。
- 正确写法：
text-align: justify; text-align-last: justify; - IE10+ 需加前缀：
-ms-text-align-last: justify; - iOS Safari 16.4 之前几乎不支持
text-align-last，别把它当主力方案 - 如果最后一行仍左对齐，检查是否被末尾
<br>、<em></em>干扰了“行尾”识别
兼容性最强的兜底方案：::after 伪元素补一行“隐形占位”
当 text-align-last 不可用或行为不稳定时，用 ::after 在段落末尾插入一个不可见但占整行宽度的块，强制浏览器把最后一行当作普通行处理。
div.text-justify::after {
content: "\00A0";
display: inline-block;
width: 100%;
}
-
\00A0是不间断空格，比零宽空格更可靠，不易被剪贴板误删 - 必须搭配
display: inline-block，float或visibility: hidden都不行 - 响应式场景下若容器宽度频繁变化，伪元素可能错位，此时需加
white-space: pre-wrap锁定换行逻辑 - 慎用于屏幕阅读器关键内容——部分读屏软件会把
\00A0当作停顿，建议对纯展示型段落使用
真正难的不是让文字看起来对齐，而是让对齐不破坏语义、不拖慢滚动、不干扰辅助技术。多数情况下，与其硬调 letter-spacing 或塞大量 ，不如接受中文排版的天然节奏，或在服务端预处理断点。伪元素方案看似简单，但一旦进到复杂 flex/grid 嵌套或富文本编辑器里，::after 的渲染时机和继承链就很容易失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
