css自动换行怎么设置

作者：昨夜的风发布日期:2025-04-02 浏览:37

/* 设置自动换行 */
.word-wrap {
  word-wrap: break-word; /* 强制文本在长单词或 URL 地址内部进行换行 */
}

.text-wrap {
  white-space: normal; /* 允许文本在需要时自动换行 */
}

/* 现代浏览器推荐使用 */
.break-word {
  overflow-wrap: break-word; /* 和 word-wrap: break-word 效果相同，是较新的属性 */
}

/* 示例 HTML 结构 */
<div class="word-wrap">这是一个非常长的单词或URL地址不会换行除非设置了word-wrap:break-word</div>
<div class="text-wrap">这段文本会在需要时自动换行，适合普通段落。</div>
<div class="break-word">这是一个非常长的单词或URL地址不会换行除非设置了overflow-wrap:break-word</div>

解释说明：

word-wrap: break-word;：强制文本在长单词或 URL 地址内部进行换行。
white-space: normal;：允许文本在需要时自动换行，适合普通段落。
overflow-wrap: break-word;：现代浏览器推荐使用的属性，效果与 word-wrap: break-word; 相同。

上一篇：css元素选择器

下一篇：css居右