css保留换行符（css内容换行）

CSS 保留换行符

简介

CSS 中的 `white-space` 属性用于控制文本中的空白字符如何处理。默认情况下，空白字符（例如空格、制表符和换行符）被视为单个空格字符并被压缩。但是，通过使用 `white-space` 属性的特定值，可以保留换行符。

多级标题

内容详细说明

要保留换行符，可以使用 `white-space` 属性的两个值之一：

pre:

保留文本中的所有空白字符，包括换行符。文本将被逐字显示，就像在源代码中一样。

pre-wrap:

保留换行符，但允许文本在行尾处换行。这对于在狭窄区域中显示文本很有用，例如在侧栏或弹出窗口中。要使用这些值，请将它们应用于要保留换行符的文本元素，如下所示：```css p {white-space: pre; }.narrow {white-space: pre-wrap; } ```

示例

以下示例显示了在文本中应用不同 `white-space` 值的效果：```html

这是第一行。 这是第二行。 这是第三行。

``````css p {white-space: pre; }.narrow {white-space: pre-wrap; } ```

输出

第一段（`white-space: pre`）：

``` 这是第一行。 这是第二行。 这是第三行。 ```

第二段（`white-space: pre-wrap`）：

``` 这是第一行。 这是第二行。 这是第三行。 ```如你所见，第一段中的换行符被保留，而第二段中的换行符则允许文本在行尾处换行。

**CSS 保留换行符****简介**CSS 中的 `white-space` 属性用于控制文本中的空白字符如何处理。默认情况下，空白字符（例如空格、制表符和换行符）被视为单个空格字符并被压缩。但是，通过使用 `white-space` 属性的特定值，可以保留换行符。**多级标题****内容详细说明**要保留换行符，可以使用 `white-space` 属性的两个值之一：* **pre:** 保留文本中的所有空白字符，包括换行符。文本将被逐字显示，就像在源代码中一样。 * **pre-wrap:** 保留换行符，但允许文本在行尾处换行。这对于在狭窄区域中显示文本很有用，例如在侧栏或弹出窗口中。要使用这些值，请将它们应用于要保留换行符的文本元素，如下所示：```css p {white-space: pre; }.narrow {white-space: pre-wrap; } ```**示例**以下示例显示了在文本中应用不同 `white-space` 值的效果：```html

这是第一行。 这是第二行。 这是第三行。

``````css p {white-space: pre; }.narrow {white-space: pre-wrap; } ```**输出*** **第一段（`white-space: pre`）：**``` 这是第一行。 这是第二行。 这是第三行。 ```* **第二段（`white-space: pre-wrap`）：**``` 这是第一行。 这是第二行。 这是第三行。 ```如你所见，第一段中的换行符被保留，而第二段中的换行符则允许文本在行尾处换行。