如何在HTML/CSS中调整文本换行的优先级与顺序

要实现你需要的换行顺序——先在Word1和Word2之间换行，再在Word2和Word3之间换行，可以用CSS Flex布局实现自适应效果，无需硬编码换行点或依赖固定宽度的媒体查询：

HTML结构 #

<div class="line-control">
  <span>Word1</span>
  <span class="word-pair">Word2 Word3</span>
</div>

CSS样式 #

.line-control {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em; /* 模拟单词间默认的空格间距 */
}

.word-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
  min-width: min-content; /* 确保组合块不会被压缩到比单个单词还窄 */
}

效果说明 #

• 屏幕宽度足够时，三个单词显示在同一行：Word1 Word2 Word3
• 宽度缩小到无法容纳整行时，Word1先单独换行，Word2和Word3保持同行：

  Word1
  Word2 Word3
  

• 宽度继续缩小到连Word2和Word3都无法在一行容纳时，Word3才会换行：

  Word1
  Word2
  Word3
  

如果不想用Flex布局，也可以结合inline-block和媒体查询实现（需指定第二次换行的宽度阈值）：

替代方案（媒体查询版） #

<span>Word1</span> <span class="keep-together">Word2 Word3</span>

.keep-together {
  display: inline-block;
  white-space: nowrap;
}

/* 当屏幕宽度小于设定值时，允许Word2和Word3换行 */
@media (max-width: 100px) {
  .keep-together {
    white-space: normal;
  }
}

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