css 换行

作者：潮起潮落发布日期:2025-02-05 浏览:144

/* 使用 CSS 实现换行的几种方法 */

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

/* 方法 2: 使用 word-break 属性 */
div {
  word-break: break-all; /* 强制文本在单词内换行 */
}

/* 方法 3: 使用 br 标签（HTML） */
p {
  /* 在需要换行的地方使用 <br> 标签 */
}

/* 方法 4: 使用 flex 布局中的 flex-wrap 属性 */
.container {
  display: flex;
  flex-wrap: wrap; /* 允许子元素换行 */
}

解释说明：

white-space: pre-line：这个属性会保留文本中的空白符（如空格和换行符），但在显示时会自动处理换行，适合用于多行文本。
word-break: break-all：当文本过长时，强制在单词内部换行，适用于需要严格控制换行的情况。
br 标签：这是 HTML 中的标签，可以在特定位置强制换行，不是 CSS 的属性，但常与 CSS 一起使用。
flex-wrap: wrap：在 Flexbox 布局中，允许子元素在容器宽度不足时自动换行。

上一篇：css rpx

下一篇：css 一行省略号