text-align: justify 仅对块级文本容器（如 p、div）生效，需内容至少两行；对内联元素、替换元素、单行文本、pre 及 flex/grid 容器无效；中文需额外处理才可两端对齐。
text-align: justify 在哪些元素上真正生效
text-align: justify 只对**块级文本容器**起作用，且需要内容足够长、能形成至少两行——单行文本无论多宽，浏览器都不会拉伸单词间距来“对齐两端”。常见误用是给 div 或 p 设了 justify，但里面只有一句话，结果看起来和 left 完全一样。
它对内联元素（如 span）无效；对表格单元格（td）、按钮（button）等替换元素也常不生效，取决于浏览器默认样式和盒模型。
- ✅ 推荐用在
p、div（含display: block）、section等常规块容器中 - ❌ 不要指望它让单行标题、短标签或 flex item 内部文字自动两端对齐
- ⚠️ 在
pre或white-space: pre元素里完全失效——空格和换行被保留，无法重排
为什么英文能对齐、中文却常常“卡住”不动
根本原因在于断行规则：text-align: justify 的拉伸逻辑依赖于浏览器可插入空白的位置。英文单词间天然有空格，浏览器能在词与词之间加宽；而中文词间无空格，浏览器默认只在**行尾**做最小调整（比如微调标点间距），不会拆开字与字强行撑满。
要让中文也两端对齐，必须显式告诉浏览器“字和字之间也可以加空隙”：
- 加
text-justify: inter-ideograph（仅 Chrome/Edge 支持，Firefox 已弃用） - 或更通用的做法：用
word-break: keep-all+letter-spacing微调（但会破坏语义间距） - 最稳妥的方案：服务端或 JS 预处理，在中文字符间插入零宽空格
，再配合text-align: justify
flex 或 grid 布局里 text-align: justify 为啥没反应
因为 text-align 是文本对齐属性，不是容器对齐属性。当你把一个 div 设成 display: flex，它的子元素就脱离了文档流中的“文本流”，text-align: justify 对整个 flex 容器的内容排列不起作用。
想实现类似两端对齐的效果，应该换思路：
- 用
justify-content: space-between（适用于已知子项数量且不换行） - 用
justify-content: space-around或space-evenly（更柔和的分布） - 若需动态填满整行且最后一行也两端对齐，得靠
flex-wrap: wrap+ 伪元素补白，或改用 CSS Grid 的justify-content: stretch配合grid-template-columns: repeat(auto-fill, minmax(…)))
兼容性和性能上容易忽略的细节
text-align: justify 本身兼容性极好（IE6+ 都支持），但问题出在“怎么对齐得自然”。不同浏览器对最后一行的处理不同：Chrome 默认左对齐，Firefox 有时会强行拉伸，Safari 表现又略有差异。
性能方面，开启 justify 后，浏览器需额外计算每行的空白分配，对超长段落（尤其含大量中文）可能引发轻微重排延迟——一般网页感知不到，但在滚动频繁的新闻流或电子书阅读器里，建议对 justify 元素加 will-change: contents 或限制最大高度防卡顿。
还有一点常被跳过：如果父容器用了 font-feature-settings: "kern" 或开启了字体连字，justify 可能干扰字距微调，导致某些字母组合看起来突兀。真要兼顾美观和对齐，得关掉部分高级排版特性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
