CSS的white-space属性怎么使用

CSS的white-space属性用于设置元素内部如何处理空白字符（包括空格、制表符、换行符等）以及文本的换行规则，是控制文本排版的重要属性。通过不同的取值，可以实现保留原始格式、强制不换行、自动换行等多种效果。

white-space属性的常用取值

white-space属性有多个取值，每个取值对应不同的空白和换行处理规则，具体区别如下：

各取值的实际使用场景

normal取值（默认值）

这是大多数元素的默认取值，适合普通文本段落的排版，会自动合并多余的空格，忽略源码中的换行，根据容器宽度自动换行。

<div class="text-normal">
  这是一段    测试文本
  包含多个空格和换行
</div>
<style>
.text-normal {
  white-space: normal;
  width: 200px;
  border: 1px solid #ccc;
}
</style>

上述代码最终显示时，多个空格会被合并为一个，换行也会被忽略，文本会在200px宽度内自动换行。

nowrap取值

当需要文本不换行，即使超出容器宽度也不换行时，可以使用nowrap取值，常见的场景比如导航栏的菜单项、单行文本省略效果。

/* 单行文本超出显示省略号，需要配合nowrap使用 */
.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 150px;
}

pre取值

pre取值会保留源码中的所有空白和换行，类似HTML中的<pre>标签效果，适合展示代码块、诗歌等需要保留原始格式的内容。

<div class="code-block">
  function test() {
    console.log("hello");
    return true;
  }
</div>
<style>
.code-block {
  white-space: pre;
  background: #f5f5f5;
  padding: 10px;
}
</style>

pre-wrap和pre-line取值

pre-wrap既保留空白和换行，又允许文本自动换行，适合需要保留格式但又不想文本溢出容器的场景；pre-line则只保留换行，合并多余空白，同时允许自动换行，适合需要保留段落换行但不需要多余空格的场景。

/* pre-wrap示例 */
.pre-wrap-text {
  white-space: pre-wrap;
  width: 200px;
  border: 1px solid #eee;
}

/* pre-line示例 */
.pre-line-text {
  white-space: pre-line;
  width: 200px;
  border: 1px solid #eee;
}

使用注意事项

• white-space属性会继承，子元素如果不需要父元素的空白处理规则，需要单独设置自己的white-space取值。
• 当设置white-space为pre、pre-wrap时，如果文本中有非常长的连续字符（比如无空格的英文单词、超长数字），可能还是会出现超出容器的情况，此时可以配合word-break: break-all属性强制换行。
• 这个属性只对块级元素和内联块级元素生效，对普通内联元素的作用有限。

CSSwhite_space文本处理换行控制修改时间：2026-06-23 05:36:29