让pre标签自动换行示例代码

`<pre>` 标签是 HTML 中用于呈现预格式化文本的重要元素。它保留了文本中的空格、换行和缩进，使得显示的代码或文本保持原样，这对于展示编程语言的源代码或者需要保持特定格式的文本非常有用。然而，默认情况下，`<pre>` 标签内的文本如果长度超过容器宽度，不会自动换行，而是会溢出。这在某些情况下可能不理想，尤其是在有限的屏幕空间或需要适应不同设备尺寸时。 为了让 `<pre>` 标签的内容自动换行，我们需要通过 CSS 来调整其样式。主要涉及的是 `white-space` 和 `word-wrap` 属性。下面详细解释这两个属性： 1. **`white-space` 属性**： - `white-space: pre;`：这是 `<pre>` 标签的默认值，保留所有的空白字符，不进行折行。 - `white-space: pre-wrap;`：允许在必要时进行换行，但保留空白字符，使得文本保持原格式。在大多数现代浏览器中，设置这个值可以让 `<pre>` 内容自动换行。 2. **`word-wrap` 或 `overflow-wrap` 属性**： - `word-wrap: break-word;`（在某些版本的 IE 中是 `word-wrap`，在现代浏览器中是 `overflow-wrap`）：允许单词在必要时断开，以防止内容溢出其容器。这对于处理非常长的无空格字符串尤其有用。 结合上述属性，我们可以创建一个 CSS 类来实现 `<pre>` 标签的自动换行功能，如下所示： ```css .pre-auto-wrap { white-space: pre-wrap; /* css3.0 */ white-space: -moz-pre-wrap; /* Firefox */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } ``` 在 HTML 中，你可以将这个类添加到 `<pre>` 标签上，如下所示： ```html <pre class="pre-auto-wrap"> 这是一个很长很长的代码，看我换行了木有？ </pre> ``` 通过这种方式，`<pre>` 标签内的文本会根据容器宽度自动换行，同时保持原始的格式。这在编写技术文档、博客文章或展示代码片段时非常实用，因为它确保了内容在各种屏幕尺寸下的可读性。 `<pre>` 标签的自动换行是通过 CSS 的 `white-space` 和 `word-wrap` 属性实现的，这些属性允许文本在必要时进行换行，同时保持预格式化的特性。这样，无论文本有多长，都能适应页面布局，提供良好的阅读体验。