css 允许换行

作者：ˉ吻干迩的'泪发布日期:2026-05-19 浏览:62

/* 允许文本在 CSS 中换行的示例代码 */

/* 使用 word-wrap 或者 overflow-wrap 属性 */
p {
  word-wrap: break-word; /* 或者使用 overflow-wrap: break-word; */
}

/* 使用 white-space 属性 */
pre {
  white-space: pre-wrap; /* 保留空白符序列，但是正常地进行换行 */
}

/* 使用 flexbox 布局时允许子元素换行 */
.container {
  display: flex;
  flex-wrap: wrap; /* 允许子元素在需要时换行 */
}

解释说明：

word-wrap: break-word;（或 overflow-wrap: break-word;）：当单词过长无法适应容器宽度时，允许单词在任意位置断开并换行。适用于文本内容超出容器宽度的情况。
white-space: pre-wrap;：保留文本中的空白符（如空格、换行符等），但同时允许文本根据容器宽度自动换行。常用于 <pre> 标签中，确保格式化后的代码或文本能够正确换行。
flex-wrap: wrap;：在使用 Flexbox 布局时，允许子元素在父容器宽度不足时换行排列，避免子元素溢出容器。

上一篇：css文字不换行省略号

下一篇：css3 loading