CSS 自动换行|极客教程

CSS 自动换行

在CSS中，我们可以使用 white-space 属性来控制文本如何换行。默认情况下，文本会在必要时换行以适应容器宽度。但是有时候我们可能希望文本完全不换行或者在特定位置换行。下面我们将详细介绍如何使用CSS来控制文本的换行。

white-space 属性

white-space 属性用于指定元素内的空白如何处理。它有以下几个取值：

normal：默认值，合并空格和换行符，并在必要时换行。
nowrap：合并空格和换行符，但是不换行。
pre：保留空白和换行，但是不自动换行。
pre-line：合并空格，保留换行，可以自动换行。
pre-wrap：保留空白和换行，但是可以自动换行。

不换行

如果我们希望文本完全不换行，可以将 white-space 属性设置为 nowrap。示例代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
    p {
        white-space: nowrap;
    }
</style>
</head>
<body>

<p>This is a long sentence that should not be broken.</p>

</body>
</html>

上面的代码中，<p> 元素中的文本不会换行，而是会在必要时水平滚动以适应容器宽度。如下图所示：

This is a long sentence that should not be broken.

保留换行符

有时候，我们希望保留文本中的换行符，并在需要时自动换行。这时，可以使用 white-space 属性的 pre-line 取值。示例代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
    p {
        white-space: pre-line;
    }
</style>
</head>
<body>

<p>This is a text with
line breaks in it.</p>

</body>
</html>

上面的代码中，<p> 元素中的文本会保留换行符，但是可以自动换行。如下图所示：

This is a text with
line breaks in it.

保留换行和空白

有时候，我们可能需要完全保留文本中的换行和空白符，不进行合并。这时，可以使用 white-space 属性的 pre 或者 pre-wrap 取值。示例代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
    p {
        white-space: pre;
    }
</style>
</head>
<body>

<p>This is a      text with
        multiple
            spaces.</p>

</body>
</html>

上面的代码中，<p> 元素中的文本会保留文本中的换行符和空白符，但是不会自动换行。如下图所示：

This is a text with
multiple
spaces.