css自动换行

作者：翔龙天下发布日期:2025-05-18 浏览:60

/* 使用 word-wrap 或者 overflow-wrap 属性来实现自动换行 */
p {
  word-wrap: break-word; /* 或者使用 overflow-wrap: break-word; */
}

/* 使用 white-space 属性来控制空白符的处理方式 */
p {
  white-space: pre-line; /* 保留空白符，但会进行自动换行 */
}

/* 示例 HTML 代码 */
<p>
  这是一个很长的文本，当它超出容器的宽度时，将会自动换行。这是一个很长的文本，当它超出容器的宽度时，将会自动换行。
</p>

解释说明：

word-wrap (或 overflow-wrap)：用于指定是否允许长单词或 URL 地址断开并在下一行继续。break-word 值表示允许在单词内断行，以防止内容溢出容器。
white-space：用于控制元素内的空白符（如空格、换行符）如何处理。pre-line 会保留空白符，但会在需要时自动换行。

如果需要更复杂的换行控制，可以根据具体需求调整这些属性的值。

上一篇：css省略号

下一篇：css padding