项目段落换行问题：如何用CSS全局避免单个单词单独换行？

要彻底解决段落中单个单词独占一行的问题，别用overflow相关属性，试试以下CSS组合：

• 强制首尾行最少单词数：用widows和orphans属性，规定段落的首尾行必须至少包含2个单词，从规则上避免单个单词换行：

  p {
    /* 段落最后一行至少留2个单词 */
    widows: 2;
    /* 段落第一行至少留2个单词 */
    orphans: 2;
  }
  

  这俩属性原本为打印场景设计，但现在主流浏览器在屏幕显示中也会遵守该规则。

• 处理超长单词：如果是超长单词导致的单独换行，用overflow-wrap让浏览器在必要时拆分长单词，再配合hyphens自动加连字符优化排版：

  p {
    overflow-wrap: break-word;
    /* 需配合html的lang属性生效，比如<html lang="zh-CN"> */
    hyphens: auto;
  }
  

• 全局覆盖所有文本元素：如果要让全站所有文本都生效，把选择器换成全局文本容器：

  body, p, div, h1, h2, h3, span {
    widows: 2;
    orphans: 2;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  

注意：hyphens需要HTML根标签设置正确的lang属性，才能让浏览器识别对应语言的连字符规则，确保拆分更合理。

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