CSS text-align: justify在strong元素中词间距过大的问题求助

问题分析 #

当段落设置text-align: justify时，浏览器会通过拉伸文本中的空格实现两端对齐。由于<strong>是行内元素，其内部的空格也会被纳入拉伸范围，尤其是当strong内包含长连续单词或较短文本时，空格被过度拉伸就会出现词间距过大的情况。

解决方案 #

以下是几种可行的修复方法：

方法1：禁止strong内文本换行与空格拉伸

给strong添加white-space: nowrap，让其内部文本保持紧凑连续状态，避免浏览器拉伸空格：

p {
  text-align: justify;
  hyphens: auto;
}

strong {
  white-space: nowrap;
}

这种方法适合strong内容较短的场景，不会破坏段落整体的两端对齐效果。

方法2：让strong内部文本左对齐，不参与段落拉伸

将strong设为inline-block并设置内部文本左对齐，使其作为独立行内块存在，内部文本不受段落justify的影响：

p {
  text-align: justify;
  hyphens: auto;
}

strong {
  display: inline-block;
  text-align: left;
}

此方法适合strong内容较长的场景，既保证内部文本正常排版，又不干扰段落整体对齐。

方法3：优化断字与空格控制

确保HTML根元素设置正确的lang属性（如<html lang="en">），让hyphens: auto正常工作，同时给strong添加word-spacing: normal限制空格拉伸：

p {
  text-align: justify;
  hyphens: auto;
}

strong {
  hyphens: auto;
  word-spacing: normal;
}

这种方法保留文本换行能力的同时，降低空格过度拉伸的概率。

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