css超出自动换行

作者：初吻被奶嘴夺走了发布日期:2026-03-20 浏览:89

/* 示例代码：实现文本超出容器时自动换行 */

.container {
  /* 设置宽度，以便观察换行效果 */
  width: 200px;

  /* 使用 word-wrap 属性来允许长单词或 URL 地址换行到下一行 */
  word-wrap: break-word;

  /* 或者使用 white-space 属性来控制空白符和换行 */
  white-space: normal;

  /* 可选：设置溢出内容的处理方式 */
  overflow-wrap: break-word;
}

解释说明：

word-wrap: break-word;：当一个单词太长无法在容器内显示时，它会强制该单词换行。这对于包含长单词或 URL 的文本非常有用。
white-space: normal;：默认情况下，浏览器会根据需要自动换行。如果你不想让文本中的空格被忽略，并且希望文本正常换行，可以使用此属性。
overflow-wrap: break-word;：与 word-wrap 类似，用于处理长单词的换行问题。它是 word-wrap 的新名称，建议优先使用 overflow-wrap。
width: 200px;：这里设置了容器的宽度，方便你观察换行的效果。你可以根据实际需求调整这个值。

通过这些样式，你可以确保当文本超出容器时，它会自动换行而不是溢出容器。

上一篇：css边框渐变色

下一篇：css 圆角梯形