text-align:justify间距过大出现空白的原因及解决方法

• 该属性的实现逻辑是通过自动调整行内字符、单词的水平间距，让每行文本的左右边缘贴合容器边界实现两端对齐。如果某一行可调整的内容量不足（比如行内存在无法拆分的长英文单词、长链接、行内块元素，或是段落最后一行只有少量字符），浏览器为了凑满整行宽度，会强行拉大字符/单词间距，就会出现大面积的多余空白。
• 行间距异常通常是两个诱因：一是没有给段落设置明确的line-height值，浏览器在自动调整字间距时，行盒高度计算出现随机偏差；二是行内混排了不同字号、不同垂直对齐方式的内容，两端对齐时的垂直错位会被放大，视觉上呈现出行间距忽大忽小的效果。
• 中文场景下的额外诱因：多数浏览器默认的两端对齐规则优先调整西文单词间距，不会自动在汉字间做均匀间距分配，容易出现某几行字间距突然变大的问题。

• 补全基础对齐配置，固定行高同时明确最后一行的对齐规则，避免最后一行被强行拉满：

.blog-content p {
  text-align: justify;
  /* 根据博客排版风格设置固定行高，一般1.6-1.8倍字号阅读体验最好 */
  line-height: 1.75;
  /* 明确指定段落最后一行左对齐，兼容大部分现代浏览器 */
  text-align-last: left;
}

• 配置合理的断行规则，适配中英文混排、长内容场景，同时针对中文排版优化对齐逻辑：

.blog-content p {
  /* 继承上面的基础配置，追加以下属性 */
  /* 允许长单词、长链接在必要时拆分到下一行，避免长内容撑满整行导致其他行间距异常 */
  word-break: break-word;
  overflow-wrap: break-word;
  /* 针对中日韩表意文字优化对齐逻辑，优先在汉字间均匀分配间距 */
  text-justify: inter-ideograph;
}

• 兼容老旧浏览器的兜底方案：如果需要适配不支持text-align-last的浏览器，可以通过伪元素给段落末尾追加一个满宽的空内联元素，让浏览器始终判定最后一行是满行，不会强行拉大少量内容的间距：

.blog-content p::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 0;
}

• 特殊场景规避：如果段落容器宽度过窄（比如移动端侧边栏的小字模块，一行只能容纳5个以内汉字），不建议使用两端对齐，这种场景下无论怎么调整规则都很容易出现不均匀的大间距，直接使用左对齐即可。如果段落内嵌入了代码片段、行内图片等不可拆分的元素，可以手动调整内容断句，避免这类元素单独卡在某一行导致该行可调整的字符量不足。

内容的提问来源于stack exchange，提问作者Lema Kefyalew