空白与换行：white-space、overflow-wrap、word-break

本页目录

文本换行是三个属性合起来决定的：white-space 管「空白和换行符怎么处理」，overflow-wrap 与 word-break 管「一行排不下时从哪里断」。它们经常被混为一谈，因为它们的效果在简单例子里看起来一样。

white-space 的六个值

记忆方式：pre 系列保留空白（像 <pre> 标签），带 wrap 的允许换行，pre-line 只保留换行不留空格。

pre-wrap 与 break-spaces 的差别只在行尾空格：前者把行尾空格「悬挂」到行外，后者把它们当成可断字符。做聊天记录、代码对比时这个差别看得见。

默认情况下，一个太长的单词（URL、哈希）会溢出容器，而不是断行——因为西文只在空格与连字符处断。

值	行为
`normal`	只在正常断点断，长单词溢出
`break-word`	实在放不下时才在任意位置断（不影响最小内容宽度计算）
`anywhere`	任意位置可断，并且参与 `min-content` 计算（容器可以被撑到最窄）

word-wrap 是 overflow-wrap 的旧名，两者等价；新代码写 overflow-wrap。

break-all 的典型用途是「一列固定宽度的数字/编码」，代价是英文单词会被拦腰砍断。break-word 作为 word-break 的值已经废弃，别再用。

中文本身不需要 break-all：CJK 字符默认就可以在任意字之间换行，这是语言规则的一部分。

hyphens: auto 对中文没有意义（中文不用连字符），对英文排版有用，但要确认目标浏览器与语言包。

值	用途
`wrap`	默认
`nowrap`	与 `white-space: nowrap` 类似，但只管换行不管空白
`balance`	让一段短文本的每行长度尽量接近，适合标题
`pretty`	尽量避免最后一行只剩一个词（孤字）

balance 只适合几行的短文本（标题、卡片标题）；用在长段落上浏览器会直接忽略，因为它有行数上限。

单行省略：

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

长的 URL 或哈希不撑破容器：

.break-anywhere {
  overflow-wrap: anywhere;
}

保留用户输入的换行与空格（评论、备注）：

.user-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}