纯CSS的text-align: justify对中文无效，因浏览器不在汉字间插入弹性间距；需用text-justify: inter-character并设lang="zh"，配合text-align: justify生效。
纯 CSS 的 text-align: justify 对中文段落基本无效——这不是你漏写了什么，是浏览器默认不给汉字之间加可伸缩间距。 要让中文真正两端对齐，必须组合使用现代 CSS 属性，并满足多个硬性前提条件。
为什么 text-align: justify 在中文里“没反应”
浏览器实现 text-align: justify 时，只会在 Unicode 标记为「单词分隔符」的位置（比如空格、连字符）插入弹性间隙。中文字符几乎全属「普通字母」类，没有内置断点，所以 Chrome、Safari、Edge 默认不会在字与字之间拉伸间距。结果就是：整段文字堆在左边，最后一行裸露左对齐，和 text-align: left 几乎一样。
- 中英文混排时，英文部分正常拉伸，中文部分挤成一团
- 某些 Web 字体（尤其等宽字体）会直接忽略该声明
- 单行文本永远不触发 justify 行为，哪怕写了也没用
- 容器没设
width或max-width，“两端”无从谈起
text-justify: inter-character 是目前最干净的解法
Chrome 120+、Edge 120+、Firefox 110+、Safari 17.4+ 支持 text-justify: inter-character，它强制按字断行并均匀分配字间距。但有两个关键前提：
- 必须在
<html lang="zh">或最近的块级父容器上设置lang="zh"，否则 Safari 可能静默失效 - 必须配合
text-align: justify使用，单独写text-justify不生效 - 短段落（如少于 4 行）可能因换行点不足，导致末行仍左对齐
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<p lang="zh" style="text-align: justify; text-justify: inter-character;">这是一段用于演示两端对齐的中文段落。它需要足够长度才能体现效果。</p>
单行文本两端对齐要用 text-align-last: justify
纯 text-align: justify 对单行无效。想让一行文字首尾贴住左右边界（比如表单 label、卡片信息行），必须加 text-align-last: justify。
- 仅在容器有明确宽度（如
width: 120px）且高度能容纳一行时才稳定生效 - iOS Safari 14.5+ 才支持
text-align-last，旧版本直接回退为左对齐 - 文字过短（如只有 2–3 个汉字）时，浏览器无法合理拉伸，效果不可控
- 中英文混排建议加
word-break: keep-all防止英文被意外断开
示例：
<div class="label" style="width: 120px; height: 1.5em; text-align: justify; text-align-last: justify;">姓名</div>
最后一行撑不满？别依赖 text-align-last: justify
规范定义下，最后一行默认左对齐；而 text-align-last: justify 对中文支持极差，多数浏览器直接无视。更可靠的做法是“骗”浏览器认为还有下一行：
- 用
::after伪元素补一个display: inline-block; width: 100%的空白行，不占视觉空间但参与对齐计算 - 避免插入零宽空格（
或\u200B），复制粘贴时可能带出异常字符 - JS 动态切分 + 插入
仅适用于出版级场景（如电子书导出），前端运行时成本高、兼容性难控
轻量稳妥写法：
.justified::after { content: ""; display: inline-block; width: 100%; height: 0; }
真正高保真的两端对齐，靠结构而非纯 CSS：如果项目对排版一致性要求极高（比如 PDF 导出、长文阅读页），建议服务端或构建时预处理文本，按行宽插入零宽空格，而不是寄希望于浏览器现场渲染。
