一、最推荐通用写法（90% 场景）

  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}

适用：

• 中文 + 英文混排

• URL / 特殊符号

• 不希望英文被拆成字母

  
  

二、常见需求对应写法

以下场景覆盖：不拆单词 / 允许拆单词 / 特殊符号提前换行 等真实业务需求

1️⃣ 不希望单词被拆开

  word-break: normal;
  overflow-wrap: normal;
}

2️⃣ 单词太长允许必要时换行（推荐）

  overflow-wrap: break-word;
  word-break: normal;
}

3️⃣ 特殊符号（- _ / .）导致断行

  word-break: keep-all;
  overflow-wrap: break-word;
}

4️⃣ 完全不换行（一行显示）

.text {
  white-space: nowrap;
}

5️⃣ 一行显示，超出省略号

6️⃣ URL / 长链接优雅断行

  word-break: normal;
  overflow-wrap: anywhere;
}

7️⃣ 代码 / hash / token 强制断行

  word-break: break-all;
  font-family: monospace;
}

8️⃣ 明确接受单词被拆开（强制任何位置换行）

.text {
  word-break: break-all;
}

适用：

• 日志内容

• 长 hash / token / ID

• 空间极窄但必须完整展示

⚠️ 英文会被拆成字母，属于主动选择的行为

9️⃣ 特殊符号导致“提前换行”（如 - / _ .）

.text {
  word-break: normal;
  overflow-wrap: normal;
}

说明：

• 禁止在符号处断行

• 让浏览器只在真正需要时换行

🔟 允许在特殊符号处优先换行（比拆字母更友好）

.text {
  overflow-wrap: anywhere;
  word-break: normal;
}

适用：

• URL / 路径

• aaa-bbb-ccc-ddd

• 希望优先在符号处分行，而不是字母中间

四、不推荐写法（慎用）

⚠️ 以下写法不是不能用，而是必须明确知道后果

word-break: break-all;

❌ 会把英文拆成字母，仅适合日志 / code 场景

五、属性速记表

📌 记住一句话：

优先用 overflow-wrap: break-word，避免 word-break: break-all