如何使用CSS超过长度换行|极客教程

如何使用CSS超过长度换行

在前端开发中，经常会遇到文字内容超过元素宽度而需要换行的情况。在CSS中，通过white-space属性可以实现文本的换行处理。本文将详细介绍如何使用CSS来实现超过长度的文本换行效果。

white-space属性

white-space属性用于控制元素内文本的显示方式，包括空格、换行符和Tab字符等。

常见取值如下：

normal：默认值，合并连续的空白符，换行符被当作空格处理
pre：保留空格和换行符，但不允许文本环绕
nowrap：不允许文本换行
pre-wrap：保留空格和换行符，允许文本环绕
pre-line：合并连续的空白符，保留换行符

换行处理示例

1. 超过长度自动换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Wrapping</title>
    <style>
        .container {
            width: 200px;
            border: 1px solid #ccc;
            padding: 10px;
        }

        .wrap {
            white-space: normal;
        }
    </style>
</head>
<body>
    <div class="container">
        <p class="wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis et eros feugiat vulputate vel auctor massa.</p>
    </div>
</body>
</html>

效果：文字超过容器宽度时会自动换行。

2. 不允许换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Wrapping</title>
    <style>
        .container {
            width: 200px;
            border: 1px solid #ccc;
            padding: 10px;
        }

        .nowrap {
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="container">
        <p class="nowrap">Thisisaverylongtextwithoutspaceswhichwillnotwrap</p>
    </div>
</body>
</html>

效果：文本不允许换行，会在容器内一行显示。

3. 保留换行符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Wrapping</title>
    <style>
        .container {
            width: 200px;
            border: 1px solid #ccc;
            padding: 10px;
        }

        .pre {
            white-space: pre;
        }
    </style>
</head>
<body>
    <div class="container">
        <p class="pre">This
        is
        a
        text
        with
        line
        breaks</p>
    </div>
</body>
</html>