如何用CSS避免H2内span后的文本换行至span下方？

不用修改现有HTML结构，仅通过CSS Flex布局就能实现你要的效果，具体方案如下：

h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* 可选：让数字与文本垂直居中对齐 */
}

h2 span {
  flex-shrink: 0;
  margin-right: 0.5em; /* 可选：给数字和文本之间添加间距 */
}

方案说明 #

• Flex布局会把h2内部的<span>和后面的匿名文本节点识别为两个独立的flex项目，当标题宽度不足时，整个文本块会作为一个整体换行，不会出现文本拆分到数字下方的情况，完全等价于用两个<span>分别包裹数字和文本的效果。
• flex-shrink: 0确保数字部分不会因容器宽度不足被压缩变形；align-items: center可以让数字和文本垂直对齐，提升视觉效果；右侧间距则是优化排版的可选设置。

这个方案完全响应式，适配各种屏幕宽度，比你之前尝试的内边距+负边距方案更可靠，也不会像white-space:nowrap那样强制文本不换行导致溢出。

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