自动换行 css

基础概念

自动换行（Automatic Wrapping）是指在文本显示时，当一行文本的宽度超过其容器的宽度时，浏览器会自动将文本换行到下一行。这是网页布局中的一个基本功能，有助于提高文本的可读性。

类型

CSS 中实现自动换行的主要属性是 white-space 和 word-wrap（或 overflow-wrap）。

white-space：控制文本中的空白符处理方式，包括换行、空格和制表符的处理。
- normal：默认值，空白符会被浏览器忽略，文本会在合适的地方自动换行。
- nowrap：文本不会换行，所有文本都在一行显示，直到遇到 <br> 标签。
- pre：空白符会被浏览器保留，文本不会自动换行。
- pre-wrap：空白符会被浏览器保留，文本会在合适的地方自动换行。
- pre-line：空白符会被浏览器忽略，但文本会在合适的地方自动换行。
word-wrap/overflow-wrap：控制长单词或 URL 的处理方式。
- normal：默认值，长单词或 URL 不会被拆分。
- break-word：长单词或 URL 会在必要时被拆分以适应容器宽度。

应用场景

自动换行广泛应用于各种网页布局中，特别是在以下场景：

文章和博客：确保长段落文本能够良好显示。
表单和输入框：防止用户输入的长文本溢出容器。
代码块：在显示代码时，确保代码不会因为过长而影响可读性。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动换行示例</title>
    <style>
        .container {
            width: 300px;
            border: 1px solid #000;
            padding: 10px;
            white-space: pre-wrap; /* 自动换行 */
            word-wrap: break-word; /* 长单词或 URL 拆分 */
        }
    </style>
</head>
<body>
    <div class="container">
        这是一个自动换行的示例文本。当文本的宽度超过容器的宽度时，浏览器会自动将文本换行到下一行。
    </div>
</body>
</html>