如何用CSS防止++序列被换行拆分？

嘿，这个问题我之前也碰到过！Chrome确实会在+这类非字母数字符号处自动换行，而Firefox的默认处理更符合你的预期——把text++当成一个整体。下面给你两个实用的CSS解决方案：

• 精准包裹法（推荐）：给需要保持整体的文本套一个<span>标签，然后通过CSS强制这个标签内的内容不换行。这样其他文本依然能正常在空格处换行，只有目标内容保持完整。
  HTML示例：

  <p>我希望这段文字里的<span class="keep-together">text++</span>不会被拆成两行，其他内容正常按空格换行</p>
  

  CSS代码：

  .keep-together {
    white-space: nowrap;
  }
  

• 全局段落控制法：如果你的整个段落都需要避免在符号处换行（而不只是特定的++序列），可以给段落设置以下CSS属性：

  p {
    word-break: keep-all;
    overflow-wrap: normal;
  }
  

  不过要注意，word-break: keep-all原本是为中文、日文这类CJK文本设计的，用来避免单个汉字被拆分，但在Chrome里也能阻止非CJK文本在符号处换行。这种方法的缺点是会影响整个段落的换行逻辑，不如第一种方法精准。

另外补充一句：如果你的文本是动态生成的，没法手动添加<span>，那可能需要配合JavaScript来自动识别并包裹这类特殊序列，但既然你问的是CSS方案，上面两种应该能解决大部分场景的问题啦。

内容来源于stack exchange