text-align: justify 在中文中常无效，因中文无空格分隔，需配合 text-justify: inter-character 才能实现字级两端对齐；末行默认不拉伸，可用 ::after 伪元素解决；仅现代浏览器支持，且需注意性能与可访问性。
text-align: justify 在中文里为什么经常没效果
因为 text-align: justify 默认只对「有空格分隔的单词」起作用，而中文词与词之间没有空格，浏览器找不到自然断行点，就干脆不拉伸——看起来和左对齐一样。
常见错误现象：text-align: justify 写了但文字完全没变化；换行后末行还是左对齐，甚至出现超大字间距。
- 必须配合
text-justify才能激活中文两端对齐逻辑（仅现代浏览器支持） -
text-justify的值不能乱填：inter-word对中文无效，inter-character才是关键 - 如果容器太窄、单行字数太少（比如只有 2–3 个汉字），依然无法触发拉伸——这是浏览器渲染策略，不是 bug
text-justify: inter-character 的实际写法和兼容性
它才是让中文真正“字字等距撑满”的核心属性，但得和 text-align: justify 成对出现，缺一不可。
使用场景：新闻正文、出版级排版、需要严格控制行宽的印刷风格网页。
- 标准写法：
text-align: justify; text-justify: inter-character; - Chrome / Edge 104+、Firefox 91+、Safari 16.4+ 支持；旧版 Safari 和 IE 完全忽略
text-justify - 不加
text-justify，只写text-align: justify，在中文环境基本等于没写 - 注意：该属性不继承，子元素需显式设置或用 inherit
遇到末行不拉伸、最后一行左对齐怎么办
这是 text-align: justify 的默认行为——末行永远不拉伸，除非你主动干预。
常见错误现象：段落最后一行明显短一截，破坏整体对齐感。
- 最稳妥方案：用
::after伪元素补一个看不见的“占位字”，骗浏览器把它当普通行处理：div::after { content: "\00A0"; display: inline-block; width: 100%; } - 更轻量做法：给末尾加一个零宽空格
或 - 别用
text-align-last: justify—— 它对中文支持极差，多数浏览器直接无视
性能和可访问性容易被忽略的细节
两端对齐不是纯视觉装饰，它会改变文本流、影响屏幕阅读器停顿节奏，也轻微拖慢重排。
- 每行都要计算字符间距，长段落 + 小字体下，滚动时可能有轻微卡顿（尤其低端 Android WebView）
- 某些读屏软件会把拉伸后的空隙误读为停顿，导致语义断裂；建议搭配
aria-label或明确语义结构 - 不要对按钮、标题、短标签用
text-justify—— 字数少时强行拉伸会导致字形畸变，反而降低可读性
真正起效的点其实很窄：多行、中文字数足够、容器宽度稳定、目标浏览器可控。其他情况，不如老老实实左对齐加微调 letter-spacing。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
