text-align: justify“没反应”是因为仅对能换行的多行块级文本生效，单行、无空格、容器无明确宽度或父元素为flex时均失效；中文还需text-align-last: justify配合才可两端对齐。
text-align: justify 为什么在初级项目里经常“没反应”
直接写 text-align: justify 却看不到效果，是初级项目中最常遇到的问题。根本原因不是代码写错了，而是浏览器只对「能换行的多行块级文本」做拉伸——单行、无空格分隔、容器未设宽、或父容器是 flex，都会让它完全静默。
- 确保内容至少两行（比如用
包裹一段足够长的中文/英文） - 避免把
justify直接加在或按钮等内联/替换元素上 - 若容器是
display: flex，子元素必须显式设width: 100%或flex: 1，否则justify作用域被压缩到文字实际宽度内 - 英文需靠空格分词；中文无天然断点，
justify默认不处理字与字之间间距
中文两端对齐必须配合的两个关键条件
纯 text-align: justify 对中文基本无效，因为浏览器不会在汉字间自动加空隙。要让中文真正拉伸，得同时满足：
-
text-align-last: justify—— 否则最后一行永远左对齐（哪怕你写了justify） - 容器有明确宽度（
width或max-width），且不能是fit-content类行为
注意：text-align-last 在 Chrome/Firefox 中必须和 text-align: justify 成对出现才生效；Safari 16.4+ 才稳定支持，iOS Safari 16.4 之前基本忽略它。
伪元素 ::after 强制末行对齐的实操写法
当 text-align-last 兼容性不可控时，更稳妥的方案是用伪元素“撑开”最后一行。这个技巧在初级项目中落地快、兼容好，但细节容易出错：
- 必须用
content: "\00A0"（不间断空格），不是空字符串或零宽空格；后者可能被剪贴板误删或读屏软件误读 -
display: inline-block是关键，float或visibility: hidden都不行 - 响应式场景下若容器宽度频繁变化，建议加
white-space: pre-wrap锁定换行逻辑，防止伪元素错位 - 示例代码：
.text-justify { text-align: justify; } .text-justify::after { content: "\00A0"; display: inline-block; width: 100%; }
别踩 letter-spacing 模拟对齐的坑
有人会想：既然浏览器不拉伸中文，那我手动加 letter-spacing 不就行了？这在初级项目里极易翻车：
-
letter-spacing是全局字符间距，一旦设了，所有字间都等距，导致标点、数字、英文混排时严重失衡 - 响应式缩放时，固定值（如
letter-spacing: 2px）在小屏下会撑破容器，在大屏下又不够用 - 它和
text-align: justify叠加使用时，浏览器会先拉伸再加字距，结果不可预测 - 真正可控的做法是服务端或 JS 在每个中文字符后插入
（零宽空格），再配text-align: justify；但要注意可能被屏幕阅读器读成停顿，纯展示型段落才推荐
最常被忽略的一点：两端对齐不是排版终点，而是起点。它暴露的是行高不一致、字体栈混用、或容器宽度未约束等问题。先 fix 这些，justify 才会真正稳住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
