CSS white-space属性详解CSS的white-space属性用于设置如何处理元素中的空白。根据参考资料的搜索

CSS的white-space属性用于设置如何处理元素中的空白。根据参考资料的搜索结果，以下是white-space属性的详细解释和示例：

white-space属性的语法如下：

white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces | inherit | initial | revert | revert-layer | unset;

white-space属性的取值和行为：

normal：默认值，连续的空白符会被合并，换行符会被压缩成一个空格，并根据容器自动换行。
nowrap：连续的空白符会被合并，但文本不会换行，即使文本长度超过容器的显示范围。
pre：空白符不会被合并，文本也不会换行，原始的换行符和空格符会被保留并显示出来。
pre-wrap：空白符不会被合并，文本会根据容器自动换行，保留所有空格。
pre-line：连续的空白符会被合并，但保留换行符，文本会根据容器自动换行。
break-spaces：与pre-wrap的行为相同，但连续的空白符会占用空间，包括在行尾，并且在空格字符之间也存在换行机会。

示例代码：

/* 示例1 */
code {
  white-space: pre;
}

/* 示例2 */
pre {
  word-wrap: break-word; /* IE 5.5-7 */
  white-space: pre-wrap; /* 当前浏览器 */
}

/* 示例3 */
p.a {
  white-space: nowrap;
}
p.b {
  white-space: normal;
}
p.c {
  white-space: pre;
}

/* 示例4 */
p {
  width: 20px;
  /* white-space: nowrap; */
  border: solid 1px blue;
}

/* 示例5 */
p {
  width: 20px;
  white-space: pre;
  border: solid 1px blue;
}

/* 示例6 */
p {
  width: 70px;
  white-space: pre-wrap;
  border: solid 1px blue;
}

/* 示例7 */
p {
  width: 70px;
  white-space: pre-line;
  border: solid 1px blue;
}

在上述示例中，可以看到不同取值的white-space属性对文本的处理效果。

参考资料：