如何用CSS实现仅在文本无法自动换行时才强制指定位置换行？

问题背景 #

我需要一段文本在空间充足时显示为两行，空间不足时自动紧凑换行。用<br>标签虽然能强制换行，但小屏幕下会出现尴尬的断行；给容器设置固定max-width又依赖字体、字号和内容，不够灵活。

现有方案的问题 #

1. 使用<br>标签：

div {
  font-family: "Helvetica Neue", Arial;
  font-size: 3rem;
}

<div>
    This is some text<br>
    Should be >1 line
</div>

小屏幕下文本会被拆成零散多行（如：this is some / text / should be >1 / line），排版混乱。

2. 设置固定max-width：

div {
  font-family: "Helvetica Neue", Arial;
  font-size: 3rem;
  max-width: 400px;
}

<div>
    This is some text
    Should be >1 line
</div>

这种方式需要根据文本内容、字体样式手动调整数值，维护成本高，无法适配动态内容。

解决方案1：Flexbox实现 #

利用Flexbox的换行特性，将文本拆分为两个行内元素，容器作为flex容器：

.text-container {
  font-family: "Helvetica Neue", Arial;
  font-size: 3rem;
  display: flex;
  flex-wrap: wrap;
  /* 可选：控制两行文本的间距 */
  gap: 0.2em;
}

<div class="text-container">
  <span>This is some text</span>
  <span>Should be >1 line</span>
</div>

• 空间充足时，两个<span>会自动分为两行（总宽度超过容器宽度触发换行）；
• 空间不足时，每个<span>内部会自动按单词紧凑换行，避免零散断行。

解决方案2：CSS Grid实现 #

用Grid让每个文本块独占一行，同时支持内部自动换行：

.text-container {
  font-family: "Helvetica Neue", Arial;
  font-size: 3rem;
  display: grid;
}

<div class="text-container">
  <span>This is some text</span>
  <span>Should be >1 line</span>
</div>

Grid默认让每个子元素占满一列，空间充足时显示为两行；空间不足时，子元素内的文本会自动按规则换行，同样满足需求。

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