CSS 特殊符号 / 英文导致换行问题速查表

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

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

适用：

• 中文 + 英文混排
• URL / 特殊符号
• 不希望英文被拆成字母

---

二、常见需求对应写法

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

1️⃣ 不希望单词被拆开

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

---

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

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

---

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

.text {
  word-break: keep-all;
  overflow-wrap: break-word;
}

---

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

.text {
  white-space: nowrap;
}

---

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

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

---

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

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

---

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

.code {
  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
• 希望优先在符号处分行，而不是字母中间

---

## 三、Flex / Table 常见坑

### flex 子项内容被异常换行

```css
.item {
  min-width: 0;
  overflow-wrap: break-word;
}

---

四、不推荐写法（慎用）

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

word-break: break-all;

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

---

五、属性速记表

属性	作用
word-break	是否允许在单词内部断行
overflow-wrap	单词太长时是否允许换行（⭐推荐）
white-space	是否允许换行

---

📌 记住一句话：

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