text-align: justify 对中文基本无效，因汉字间无天然断点；需配合 text-align-last: justify、零宽空格或 letter-spacing 模拟，且在 flex 容器中需设 width: 100% 才生效。

text-align: justify 为什么看起来没生效

常见现象是文字明明写了 text-align: justify，但行末还是左对齐，甚至整段都没变化。根本原因：浏览器只对**有换行机会的块级文本**做两端对齐，单行、无空格/连字符的长单词（比如一串中文 URL 或连续英文不换行）、或容器太窄导致无法分词时，justify 就“无事可做”。中文尤其明显——汉字间默认无天然断点，浏览器不会在字与字之间加空隙。

• 确保内容至少两行以上（单行无法 justify）
• 避免在段落里塞   或连续 <span></span> 打断自然流
• 英文需有空格分隔单词；中文若想强制断词，得配合 word-break: break-word 或 overflow-wrap: break-word（但注意这会破坏语义断行）

中文两端对齐的实际可用方案

纯 text-align: justify 对中文基本无效，因为没有空格作为伸缩锚点。真正能用的组合是：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 加 text-align-last: justify —— 让最后一行也参与拉伸（否则默认左对齐）
• 配合 text-justify: inter-ideograph（仅 Safari 和旧版 IE 支持，Chrome/Firefox 忽略）
• 更通用的做法：用 letter-spacing + text-align: justify 模拟，但必须限定容器宽度固定、且内容长度可控，否则空隙忽大忽小
• 生产环境推荐：服务端或 JS 预处理，在每字后插入 ​（零宽空格），让浏览器把它当潜在断点；但要注意屏幕阅读器兼容性和 SEO 影响

justify 在弹性布局或 flex 容器里的行为异常

如果父容器是 display: flex，子元素即使设了 text-align: justify 也大概率失效——因为 flex item 默认是“内容尺寸”，没有足够宽度供 justify 分配空白。此时 justify 的作用域被压缩到实际文字宽度内，等于没用。

• 解决方法：给文字容器显式设 width: 100% 或 flex: 1，让它撑开
• 更稳妥的是避免在 flex 主轴方向依赖 justify；改用 justify-content: space-between 处理多词并列（如导航栏文字）
• 表格单元格（<td>）中 justify 表现稳定，因 table layout 天然提供宽度上下文 <h3>justify 引发的渲染性能和可访问性问题</h3> <p>浏览器实现 justify 时需多次测量、重排单词间距，尤其在长段落或频繁 DOM 更新场景下，可能触发额外 layout。更隐蔽的问题是：屏幕阅读器通常忽略由 justify 自动生成的视觉空隙，但若你手动插入 <code>​ 或   来辅助对齐，就可能被读成“空格”或中断语义。
  • 不要在标题、按钮、短标签等强调语义清晰的元素上用 justify
  • 移动端慎用，部分 Android WebView 对 text-justify 解析不一致
  • 测试时用键盘 Tab 导航+朗读，确认无多余停顿或错读
  实际项目里，justify 不是“开了就灵”的开关，它高度依赖内容结构、容器约束和浏览器实现细节。最常被忽略的是：你看到的“对齐”，到底是靠浏览器自动算出来的，还是靠你悄悄加了零宽字符、强行撑宽、甚至 JS 动态插空格换来的——后者看着齐，代价可能藏在性能或无障碍里。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！