如何使用CSS实现每2个单词后换行HTML内容

方案一：Grid布局（精准可控，需拆分单词） #

如果可以将每个单词拆分为独立元素，Grid布局是最稳定的实现方式：

.two-word-wrap {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 0.2em; /* 可选：调整单词间的间距 */
}

对应的HTML结构：

<div class="two-word-wrap">
  <span>The</span>
  <span>community</span>
  <span>is</span>
  <span>here</span>
</div>

该方式能严格保证每2个单词为一行，不受单词长度影响，布局精准。

方案二：纯文本适配（无需修改HTML结构） #

如果不想拆分原始文本，可通过极端值的单词间距实现强制换行：

.two-word-wrap {
  word-spacing: 9999px;
  text-indent: -9999px;
  line-height: 1.6; /* 根据需求调整行高 */
}
.two-word-wrap::first-line {
  text-indent: 0; /* 修正第一行的缩进偏移 */
}

直接将样式应用在包含纯文本的容器上即可，原理是把单词间距拉到足够大，迫使第二个单词换行，再通过伪元素修正第一行的缩进问题。

效果示例 #

原始内容：

The community is here

应用CSS后效果：

The community
is here

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