使<pre>的内容自动换行
这篇讲的是 HTML 中 `pre` 标签的一个常见痛点及其 CSS 解决方案。`pre` 元素用于展示预格式化的文本，会原样保留空格和换行，通常用于代码块。但正因为这种特性，当一行文本超过容器宽度时，它不会自动换行，而是直接横向溢出，破坏页面布局。 作者从这个实际问题出发，解释了核心原因：`white-space` 属性的默认值是 `pre`，它会阻止文本换行。解决的关键就在于通过 CSS 修改这一行为。文章重点对比了两个解决方案：将 `white-space` 设置为 `pre-wrap` 或 `pre-line`。`pre-wrap` 会在保留原始格式（包括连续的空格和换行）的同时，允许文本在容器边界处自动换行；而 `pre-line` 则会合并连续空格，但保留换行符，同样支持自动换行。 作者指出，具体选择哪种方式取决于内容。如果需要精确保留代码中的空格（比如 Python 的缩进），`pre-wrap` 是更合适的选择。对于普通需要换行的预格式文本，`pre-line` 也能胜任。这个细节区分体现了对实际开发场景的考虑。文章最后用一个简洁的代码示例，展示了如何为 `pre` 元素添加这条至关重要的 CSS 规则，完成了从问题到方案的闭环。