css文本超出换行

作者：资本principal 发布日期:2026-03-06 浏览:101

/* 示例代码：当文本超出容器宽度时换行 */

/* 使用 word-wrap 或者 overflow-wrap 属性 */
.container {
    width: 200px; /* 设置容器的宽度 */
    border: 1px solid #000; /* 添加边框以便观察效果 */
    word-wrap: break-word; /* 允许长单词或 URL 地址换行到下一行 */
}

/* 或者使用 white-space 属性 */
.text {
    width: 200px; /* 设置容器的宽度 */
    border: 1px solid #000; /* 添加边框以便观察效果 */
    white-space: normal; /* 允许文本在必要时换行 */
}

解释说明：

word-wrap: break-word;：这个属性允许长单词或 URL 地址在必要时换行到下一行。它通常用于防止文本溢出容器。
white-space: normal;：这个属性允许文本在必要时自动换行，适用于一般的文本内容。

这两种方法都可以确保文本在超出容器宽度时自动换行。

上一篇：css超出部分省略号

下一篇：css 设置背景透明