html 自动换行

作者：此岸蝶恋花发布日期:2025-10-02 浏览:24

<!DOCTYPE html>
<html>
<head>
    <title>HTML 自动换行示例</title>
    <style>
        /* 使用 CSS 的 word-wrap 属性来实现自动换行 */
        .auto-break {
            width: 200px; /* 设置一个固定的宽度 */
            word-wrap: break-word; /* 允许长单词或 URL 地址换行到下一行 */
            white-space: normal; /* 默认值，允许文本在单词之间换行 */
            border: 1px solid #000; /* 添加边框以便更清楚地看到效果 */
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="auto-break">
        这是一个非常长的单词aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa，看看它是否会自动换行。
    </div>
</body>
</html>

解释说明：

word-wrap: break-word;：这个属性允许长单词或 URL 地址在必要时被拆分并换行到下一行。这对于防止内容溢出容器非常有用。
white-space: normal;：这是默认值，表示文本会在单词之间自动换行。如果你想禁用自动换行，可以使用 white-space: nowrap;。
width: 200px;：设置了一个固定的宽度，以便更容易观察换行效果。
border 和 padding：只是为了更好地展示效果，实际使用中可以根据需要调整。

通过以上代码，你可以看到当文本超出指定宽度时，会自动换行，确保内容不会溢出容器。

上一篇：html渐变色背景代码

下一篇：html 转义字符