css 自动换行

作者：ー辈ふ只寵你人发布日期:2026-07-28 浏览:75

/* 使用 word-wrap 或者 overflow-wrap 属性可以让长单词或 URL 自动换行 */
p {
  word-wrap: break-word; /* 或者使用 overflow-wrap: break-word; */
}

/* 使用 white-space 属性可以控制元素内的空白和换行行为 */
p {
  white-space: pre-wrap; /* 保留空白符序列，但是正常地进行文本 wrapping */
}

/* 使用 hyphens 属性可以在合适的断字点自动换行，并添加连字符 */
p {
  hyphens: auto;
}

解释说明：

word-wrap (overflow-wrap)：当一个单词太长而无法在一行内显示时，word-wrap: break-word;（或 overflow-wrap: break-word;）会强制该单词换行到下一行。这适用于那些没有空格的长字符串，比如长 URL。
white-space：white-space: pre-wrap; 保留了文本中的空白符（如空格、换行符），并且允许文本在需要时换行。这对于处理包含大量空白符的文本非常有用。
hyphens：hyphens: auto; 会在适当的断字点插入连字符，使单词在换行时更美观。这在多语言文档中特别有用，因为它可以根据语言规则自动处理断字。

上一篇：css渐变色

下一篇：css 透明度