text-justify在tailwind v3.0+中默认可用但中文场景常无效，因其依赖英文排版逻辑：需块级容器、合理宽度触发换行、有空格可拉伸；中文无天然空格，浏览器仅微调字距或标点，效果弱甚至异常。
text-justify 在 Tailwind v3.0+ 中默认可用，但效果常“看不见”——问题几乎从不在于类名没加载，而在于中文内容、容器宽度或元素显示类型不满足两端对齐的渲染前提。
为什么加了 text-justify 却没反应
浏览器对 text-align: justify 的实现依赖三个硬条件：足够长的文本、明确的块级上下文、有换行机会的宽度约束。常见失效场景包括：
- 给
<span></span>或未设block/inline-block的内联元素直接加text-justify—— 它不会触发换行，自然无法拉伸间隙 - 容器宽度太宽（比如全屏
div），导致单行就能塞下全部文字，没有“多行+末行需对齐”的计算逻辑 - 纯中文短段落（如 2–3 行），浏览器无空格可拉伸，只能微调字距或标点，Chrome/Safari 下基本不可见效果，甚至出现标点悬出
- 用了
whitespace-nowrap或flex布局容器，强制禁用换行
怎样让 text-justify 真正生效
不是简单加个 class 就完事，得配合语义和布局约束：
- 只用在语义为段落的块级元素上，例如
<p class="text-justify max-w-prose"></p>——max-w-prose提供合理宽度，逼出换行 - 确保父容器有明确宽度（
max-w-或w-类），且不设display: inline或flex - 避免用于标题、按钮、标签等短文本；若必须用，加
hyphens: auto（Tailwind 中对应hyphens-auto）缓解长词撑开问题 - 需要最后一行也两端对齐？原生 CSS 需
text-align-last: justify，但 Tailwind 不内置该工具类，得手动加style="text-align-last: justify;"或在tailwind.config.js中扩展
text-justify 和 justify-between 别混用
这是两类完全不同的对齐机制，名字像但作用对象完全不同：
-
text-justify是text-align的封装，只影响**元素内部文字的水平分布**，只对块级文本容器有效 -
justify-between是justify-content的封装，只在flex或grid容器中生效，控制的是**子元素之间的间距分配**，和文字无关 - 给一个
flex容器加text-justify没意义——它里面没“段落文本”，只有子节点；反过来，给p加justify-between也不起作用，因为p默认不是 flex 容器
中文场景下要不要用 text-justify
多数情况下，不建议。原因很实际：
- 中文字间无天然空格，浏览器靠调整字距或标点位置凑齐行宽，结果常是标点挤到行尾、字距忽大忽小、产生视觉“河流”
- Android WebView 几乎忽略该行为；Safari 对
inter-ideograph支持有限，且 Tailwind 不暴露该属性配置入口 - 真正整齐的阅读体验，来自可控的宽度限制（如
max-w-2xl）+ 左对齐（text-left）+ 合理行高（leading-relaxed），而非强求两端对齐 - 如果设计稿硬性要求两端对齐，优先考虑服务端分词 + 插入零宽空格（
）或使用 CSStext-justify: inter-character（需自行注入样式，Tailwind 不支持）
最常被忽略的一点：你看到的“没效果”，大概率不是 Tailwind 配置错了，而是中文排版本身就不适合 text-align: justify 的原始设计逻辑——它为英文而生，不是为方块字准备的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
