white-space属性用于控制文本中空格、制表符和换行符的处理方式，常用取值包括normal（默认，合并空白并换行）、nowrap（禁止换行）、pre（保留空白和换行，不自动换行）、pre-wrap（保留格式且允许换行）、pre-line（合并空格但保留换行）；适用于代码展示、防止文字折行、用户输入内容排版等场景，常与overflow、text-overflow、word-break等属性配合使用，提升文本布局控制能力。
CSS中的white-space属性用于控制元素内文本的空格、制表符和换行符如何处理和显示。它决定了空白字符是否合并、是否保留换行，以及文本是否自动换行。正确使用这个属性，可以有效管理内容排版，尤其是在展示代码、日志或预格式化文本时非常关键。
white-space常用取值说明
以下是white-space常见的几个取值及其行为：
- normal：合并连续空白字符，忽略换行符，文本在容器边缘自动换行。这是默认值。
- nowrap：合并空白字符，忽略换行符，但禁止文本换行，所有内容在一行显示，可能溢出容器。
-
pre：保留所有空白字符和换行符，行为类似HTML中的
标签，遇到容器边界不会自动换行。 - pre-wrap：保留空白和换行，同时允许文本在必要时换行，适合显示长代码或日志内容。
- pre-line：合并空白字符（如多个空格变一个），但保留换行符，并允许文本自动换行。
实际应用场景与技巧
根据不同的内容类型，选择合适的white-space值能提升可读性和布局控制。
- 显示代码块时使用
white-space: pre或pre-wrap，确保缩进和换行不被破坏。 - 防止按钮或导航文字换行，可用
white-space: nowrap。 - 处理用户输入的富文本或留言内容，推荐
white-space: pre-wrap，既保留换行又避免横向溢出。 - 在响应式设计中，
pre-wrap比pre更友好，能适应小屏幕自动折行。
与其他CSS属性的配合
white-space常与word-break、overflow、text-overflow等一起使用，实现更精细的文本控制。
立即学习“前端免费学习笔记（深入）”；
- 配合
overflow: auto可为样式的内容添加滚动条。
- 使用
text-overflow: ellipsis时，需设置white-space: nowrap才能生效。 - 中文文本中，
word-break: break-all可进一步控制长串字符的断行。
基本上就这些。掌握white-space的不同取值，能帮你更灵活地处理文本格式，避免因空格或换行导致的显示异常。不复杂但容易忽略。
