css设置文本换行

CSS设置文本换行的基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。在CSS中，文本换行是指控制文本在容器中的换行行为。

类型

自动换行：默认情况下，浏览器会根据容器宽度自动换行。
自动换行：默认情况下，浏览器会根据容器宽度自动换行。
强制换行：使用white-space属性可以控制文本的换行行为。
强制换行：使用white-space属性可以控制文本的换行行为。
禁止换行：使用white-space属性可以禁止文本换行。
禁止换行：使用white-space属性可以禁止文本换行。
单词换行：使用word-wrap或overflow-wrap属性可以控制单词的换行行为。
单词换行：使用word-wrap或overflow-wrap属性可以控制单词的换行行为。

应用场景

网页布局：在网页设计中，合理使用文本换行可以使内容更加整洁美观。
响应式设计：在不同设备上，通过CSS控制文本换行可以确保内容显示的适应性。
代码展示：在展示代码时，使用white-space: pre-wrap可以保留代码的格式和缩进。

常见问题及解决方法

文本溢出：当文本内容超出容器宽度时，可以使用overflow属性来处理。
文本溢出：当文本内容超出容器宽度时，可以使用overflow属性来处理。
单词不换行：如果遇到长单词不换行的情况，可以使用word-break属性。
单词不换行：如果遇到长单词不换行的情况，可以使用word-break属性。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Text Wrapping</title>
    <style>
        .container {
            width: 200px;
            border: 1px solid black;
        }
        .nowrap {
            white-space: nowrap;
        }
        .pre-wrap {
            white-space: pre-wrap;
        }
        .break-word {
            word-wrap: break-word;
        }
        .ellipsis {
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="container">
        This is a long text that will wrap automatically.
    </div>
    <div class="container nowrap">
        This text will not wrap.
    </div>
    <div class="container pre-wrap">
        This text will wrap and preserve whitespace.
    </div>
    <div class="container break-word">
        Thisisareallylongwordthatshouldwrap.
    </div>
    <div class="container ellipsis">
        This is a very long text that will be truncated with an ellipsis.
    </div>
</body>
</html>