css 文字超出换行

作者：菠蘿。d海发布日期:2026-04-22 浏览:95

/* 当文字超出容器宽度时，使用以下 CSS 代码可以让文字自动换行 */

.container {
  width: 200px; /* 设置容器的宽度 */
  word-wrap: break-word; /* 强制文本在长单词或 URL 地址内部进行换行 */
  white-space: normal; /* 默认值，允许文本换行 */
  overflow-wrap: break-word; /* 类似于 word-wrap，用于处理长单词和 URL 的换行 */
}

解释说明：

word-wrap: break-word; 和 overflow-wrap: break-word;：这两个属性的作用是相似的，用于强制文本在长单词或 URL 地址内部进行换行，以防止内容溢出容器。
white-space: normal;：默认情况下，文本会在适当的位置换行。如果你设置了 white-space: nowrap;，则文本不会换行，除非遇到 <br> 标签。

如果你需要更严格的控制，可以根据具体需求调整这些属性。

上一篇：css超过3行显示为...并且可以展开

下一篇：overflow在css