css自动换行代码

CSS自动换行是指当文本内容超出其容器的宽度时，浏览器会自动将文本换行到下一行。这可以通过CSS的word-wrap或overflow-wrap属性来实现。以下是一些基础概念和相关代码示例：

基础概念

word-wrap: 这个属性控制文本在到达容器边界时是否应该换行。
overflow-wrap: 这是word-wrap的现代替代品，具有相同的功能。
white-space: 这个属性控制文本的空白符处理方式，也影响文本的换行。

类型

正常换行: 默认情况下，浏览器会在单词之间换行。
强制换行: 可以通过设置word-wrap: break-word或overflow-wrap: break-word来强制在单词内部换行。

应用场景

网页布局: 在文章、评论、产品描述等场景中，自动换行可以确保内容不会溢出容器。
响应式设计: 在移动设备和不同屏幕尺寸上，自动换行可以保持内容的可读性和美观性。

示例代码

以下是一个简单的示例，展示了如何使用CSS实现自动换行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS自动换行示例</title>
    <style>
        .container {
            width: 300px;
            border: 1px solid black;
            word-wrap: break-word; /* 或者 overflow-wrap: break-word */
        }
    </style>
</head>
<body>
    <div class="container">
        这是一个非常长的单词，它可能会超出容器的宽度，导致文本溢出。通过设置word-wrap或overflow-wrap属性，可以确保文本自动换行。
    </div>
</body>
</html>