css 文字换行

作者：黑白灰调发布日期:2026-04-24 浏览:134

/* 示例代码：使用 CSS 实现文字换行 */

/* 方法1：使用 word-break 属性 */
.text-break {
  word-break: break-all;
}

/* 方法2：使用 white-space 属性 */
.text-wrap {
  white-space: normal;
}

/* 方法3：使用 overflow-wrap 属性 */
.text-overflow-wrap {
  overflow-wrap: break-word;
}

解释说明：

word-break: break-all;
- 强制文本在任意字符处换行，适用于需要确保文本不会超出容器宽度的场景。
white-space: normal;
- 允许文本在必要时自动换行，默认情况下文本会在空格或标点符号处换行。
overflow-wrap: break-word;
- 当单词过长且无法正常换行时，允许单词在任意字符处断开换行，避免文本溢出容器。

以上三种方法都可以实现不同的文字换行效果，根据具体需求选择合适的方式。

上一篇：css省略号

下一篇：css自动换行