如何保留CSS hyphens:auto功能，阻止特定单词自动断字？

嘿，这个场景我太熟悉了！既然你只需要处理寥寥几个特定单词，完全不用关掉全局的hyphens: auto，试试这几个简单的办法：

• 用CSS局部覆盖断字规则：把需要保护的内容用<span>包裹，给这个span加个类，设置hyphens: none就行。这样全局的自动断字依然生效，只有被包裹的内容不会被断字。
  示例代码：

  <!-- HTML里包裹需要保护的姓名 -->
  <span class="no-hyphen">Alexandre de Sousa</span>
  

  /* CSS里添加样式 */
  .no-hyphen {
    hyphens: none;
  }
  

• 用非断字空格替代普通空格：如果是带空格的姓名（比如双名、姓氏带空格的情况），把名字中间的普通空格换成 （Unicode非断字空格），浏览器就不会在这个位置换行或断字了。比如：

  John Doe
  

  这个方法适合快速处理，不用额外加CSS类。

• 可选：用<nobr>标签（不推荐但可用）：这是HTML里的旧标签，直接把内容包在<nobr>里就能禁止换行断字，不过因为是旧特性，更推荐用CSS的方法来保持代码规范。

这些方法都很轻量，刚好适配你“数量极少、逐个处理”的需求～

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