如何在div中最大化字符间距（类似CSS Flexbox的space-between效果）

可以用纯CSS实现，不用把每个字母放进单独的div，具体方案如下：

核心实现代码 #

给包含文本的容器添加以下样式：

.justify-letters {
  width: 100%; /* 必须设置明确宽度，比如固定值或百分比 */
  text-align: justify;
  text-align-last: justify; /* 确保最后一行也能两端对齐 */
}

.justify-letters::after {
  content: "";
  display: inline-block;
  width: 100%;
}

使用示例 #

HTML结构（文本无需拆分，直接写完整字符串）：

<div class="justify-letters">THE</div>
<div class="justify-letters">QUICK</div>
<div class="justify-letters">FOX</div>

原理说明 #

• text-align: justify会让文本两端对齐，自动分配字符之间的间距，但默认只对多行文本生效
• 容器的::after伪元素会创建一个占满宽度的空行，强制单行文本触发两端对齐逻辑，从而实现类似flex space-between的效果
• 若需要微调间距，可额外添加letter-spacing属性，但建议优先依赖自动分配的间距

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