理解 white-space 属性如何控制元素内的空白字符和文本换行行为
掌握 normal、nowrap、pre、pre-line、pre-wrap、break-spaces 等关键值的区别与应用场景
学会处理代码展示、诗歌排版、长单词不换行等特定布局需求
理解 initial 和 inherit 在属性重置与继承中的作用
能够根据设计需求选择最合适的空白处理策略
CSS 中的 white-space 属性用于控制元素内部空白字符（空格、制表符、换行符）的处理方式以及文本的自动换行行为。它直接影响内容的布局和可读性，是处理特殊文本格式（如代码块、地址、诗歌）的关键工具。
基本语法：
white-space: normal | nowrap | pre | pre-line | pre-wrap | break-spaces | initial | inherit;该属性通过不同的取值，决定了浏览器是合并多余的空格、保留源代码中的换行，还是强制文本在一行显示。
下表总结了 white-space 各个属性值的核心行为：
normal 是浏览器的默认行为。它会将源代码中连续的多个空格、制表符合并为一个空格，并在容器宽度不足时自动换行。
应用场景： 常规段落文本。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>white-space: normal</title>
<style>
.box {
width: 300px;
height: 150px;
white-space: normal; /* 默认值，可省略 */
background-color: #32cd32; /* 石灰绿 */
color: white;
font-size: 24px;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">
技术社区：
一个专为开发者打造的计算机科学门户。
这里有很多 多余的空格 会被合并。
</div>
</body>
</html>效果说明：
无论源代码中有多少个空格，渲染后只显示一个。文本在到达容器右边缘时会自动折行。
nowrap 会合并连续空白，但禁止文本自动换行。文本会一直向右延伸，直到遇到显式的换行标签（如 <br>）或容器被强制截断（产生滚动条或溢出）。
应用场景： 导航菜单项、不允许折行的按钮文字、表格表头。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>white-space: nowrap</title>
<style>
.box {
width: 200px;
height: 100px;
white-space: nowrap;
background-color: #90ee90; /* 浅绿 */
color: black;
font-size: 20px;
border: 1px solid #333;
overflow: hidden; /* 演示溢出隐藏效果 */
}
</style>
</head>
<body>
<div class="box">
技术社区：一个专为开发者打造的计算机科学门户，即使内容很长也不会换行。
</div>
</body>
</html>效果说明：
文本强行在一行显示，超出容器宽度的部分会被隐藏（如果设置了 overflow: hidden）或产生横向滚动条。
pre 的行为完全等同于 HTML 的 <pre> 标签。它会原样保留源代码中的所有空格、制表符和换行符，且不会自动换行。
应用场景： 展示代码片段、ASCII 艺术图、需要严格对齐的数据。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>white-space: pre</title>
<style>
.box {
width: 250px;
height: 150px;
white-space: pre;
background-color: #90ee90;
color: black;
font-family: monospace; /* 等宽字体更适合代码 */
font-size: 16px;
border: 1px solid #333;
overflow: auto; /* 允许滚动查看长行 */
}
</style>
</head>
<body>
<div class="box">
技术社区：
缩进 被 保留
换行也被保留
这一行非常长以至于超出了容器宽度也不会自动折行...
</div>
</body>
</html>效果说明：
源代码中的缩进和换行被完美保留。长行文本会冲出容器边界（需配合 overflow 使用）。
pre-line 是 normal 和 pre 的混合体。它会合并连续的空格，但保留源代码中的换行符，并在必要时自动换行。
应用场景： 诗歌、歌词、地址列表（希望保留作者的手动换行，但允许长句自动折行）。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>white-space: pre-line</title>
<style>
.box {
width: 200px;
height: 150px;
white-space: pre-line;
background-color: #90ee90;
color: black;
font-size: 18px;
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="box">
床前明月光，
疑是地上霜。
举头望明月， 多余空格被合并
低头思故乡。
这是一句很长的话，虽然源代码里没换行，但太长了会自动折行。
</div>
</body>
</html>效果说明：
源代码中的回车换行生效，多个空格变成一个，长句子在容器边缘自动折行。
pre-wrap 保留了所有空白和换行符，同时允许文本在容器边缘自动换行。这是展示代码或格式化文本最常用的值，因为它既保持了格式，又避免了横向滚动条。
应用场景： 代码块展示、聊天记录、需要保留格式的长文本。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>white-space: pre-wrap</title>
<style>
.box {
width: 250px;
height: 150px;
white-space: pre-wrap;
background-color: #90ee90;
color: black;
font-size: 18px;
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="box">
技术社区： 保留多个空格
保留换行
这一行非常长，会在容器边缘自动折行，而不会溢出。
</div>
</body>
</html>效果说明：
空格、换行均被保留，且长文本会自动折行以适应容器宽度，不会产生横向溢出。
break-spaces 的行为与 pre-wrap 非常相似，保留空白和换行并自动折行。不同之处在于，它允许在空格字符处进行换行，并且换行后的空格会被渲染出来（占据空间），而 pre-wrap 在行尾的空格通常会被忽略或不作为换行点。
应用场景： 需要精确控制空格视觉效果的复杂排版。
示例代码：
.box {
white-space: break-spaces;
/* 其他样式... */
}效果说明：
如果一行末尾有多个空格，break-spaces 可能会在这些空格处断开，并将剩余的空格显示在下一行的开头，这在某些多语言排版或数据对齐中非常有用。
initial：将属性重置为 CSS 规范定义的初始值（即 normal）。常用于覆盖继承来的样式。
inherit：强制子元素继承父元素的 white-space 值。常用于确保组件内部行为一致。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>initial 与 inherit</title>
<style>
.parent {
white-space: pre-wrap;
border: 2px solid black;
padding: 10px;
margin-bottom: 20px;
}
.child-inherit {
white-space: inherit; /* 继承父级的 pre-wrap */
border: 1px solid red;
padding: 5px;
margin-top: 5px;
}
.reset-normal {
white-space: initial; /* 重置为 normal */
border: 1px solid blue;
padding: 5px;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="parent">
父容器：保留格式 (pre-wrap)
<div class="child-inherit">
子容器 (inherit)： 我也保留了空格和换行。
</div>
<div class="reset-normal">
重置容器 (initial)： 多余空格被合并，恢复默认行为。
</div>
</div>
</body>
</html>white-space 属性是控制文本微观布局的强大工具。选择合适的值取决于你是否需要保留源代码中的格式（空格 / 换行）以及是否允许自动换行。
如果你想在网页上展示一段 Python 代码，要求保留代码的缩进和换行，同时在屏幕较窄时自动换行以避免出现横向滚动条，应该使用哪个 white-space 属性值？
white-space: pre 和 white-space: pre-wrap 的主要区别是什么？在什么情况下你会选择 pre 而不是 pre-wrap？
假设父容器设置了 white-space: nowrap，如何让其中的某个子段落恢复为正常的自动换行行为？请写出对应的 CSS 代码。