CSS中white-space属性如何控制换行_CSS中white-space控制换行详解

white-space属性用于控制空白符处理和文本换行行为，其常用值包括normal、nowrap、pre、pre-wrap、pre-line和break-spaces，不同值对应不同的空白合并与换行规则；通过结合overflow:hidden和text-overflow:ellipsis可避免nowrap导致的文本溢出；white-space与word-break功能不同，后者控制单词内断行方式；在代码格式化中，pre或pre-wrap能保留缩进与换行，常与pre标签或高亮库配合使用以提升可读性。

CSS中的

white-space

white-space

解决方案

white-space

• normal

  (默认值): 连续的空白符会被合并成一个空格。文本会在适当的位置自动换行。换行符（例如
  ）会被当作换行来处理。

  立即学习“前端免费学习笔记（深入）”；

• nowrap

  : 与

  normal

  类似，但会阻止文本自动换行。 文本只会在遇到
  标签时换行。如果文本过长，可能会超出容器的边界。

• pre

  : 保留所有空白符（包括空格和换行符），且文本不会自动换行。 文本会按照源代码中的格式显示，类似于

   标签。
  

• pre-wrap

  : 保留空白符，但允许文本自动换行。 换行符和
  标签也会被当作换行来处理。

• pre-line

  : 合并空白符，但保留换行符。 文本会在遇到换行符或需要自动换行时换行。

• break-spaces

  : 与

  pre-wrap

  类似，但是会保留所有的空格，即使这些空格会超出容器的边界。 此外，还会添加一些额外的换行规则。

示例代码:

.normal {
  white-space: normal;
}

.nowrap {
  white-space: nowrap;
}

.pre {
  white-space: pre;
}

.pre-wrap {
  white-space: pre-wrap;
}

.pre-line {
  white-space: pre-line;
}

.break-spaces {
  white-space: break-spaces;
}

如何使用

white-space

使用

white-space: nowrap

• overflow: hidden;

  : 隐藏超出容器边界的内容。

• text-overflow: ellipsis;

  : 当文本溢出时，显示省略号。
  

  科大讯飞-AI虚拟主播

  科大讯飞推出的移动互联网智能交互平台，为开发者免费提供：涵盖语音能力增强型SDK，一站式人机智能语音交互解决方案，专业全面的移动应用分析；

  下载

示例代码:

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px; /* 设置容器的宽度 */
}

这会使超出的文本显示为省略号，避免破坏布局。 当然，仅仅使用

text-overflow: ellipsis

white-space: nowrap

overflow: hidden

white-space

white-space

word-break

• word-break: normal;

  : 使用浏览器默认的换行规则。

• word-break: break-all;

  : 允许在单词内的任何字符处换行，即使这样会破坏单词的完整性。

• word-break: keep-all;

  : 只能在半角空格或连字符处换行，主要用于非CJK（中文、日文、韩文）文本。

• word-break: break-word;

  : 较新的属性，尝试在单词的边界处换行，如果单词过长，则允许在单词内部换行。

示例代码:

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

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

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

word-break

white-space

white-space: pre-wrap

word-break: break-word

white-space

white-space: pre

white-space: pre-wrap

 标签或代码高亮库，可以创建出美观且易于理解的代码示例。

例如，可以使用以下HTML和CSS来显示一段代码：
  
    function helloWorld() {
      console.log("Hello, world!");
    }
  
.code {
  white-space: pre-wrap;
  background-color: #f0f0f0;
  padding: 10px;
  font-family: monospace;
}
这会保留代码的格式，并添加背景色和内边距，使其更易于阅读。当然，实际应用中，更常见的是使用专业的代码高亮库，例如 Prism.js 或 highlight.js， 它们能够自动识别代码的语法并进行着色，从而提高代码的可读性。 这些库通常也依赖于 
white-space
 属性来正确显示代码的格式。