换行css

作者：颠沛流离的伤发布日期:2025-04-03 浏览:99

/* 使用 CSS 实现换行效果 */

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

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

/* 方法三：使用 overflow-wrap 属性 */
.text3 {
  overflow-wrap: break-word; /* 允许长单词或 URL 地址换行到下一行 */
}

/* 方法四：使用 <br> 标签（HTML） */
<p class="text4">这是一段文本。<br>这是新的一行。</p>

解释说明：

white-space: pre-wrap：保留文本中的空白符（如空格、换行符），并且允许文本根据容器宽度自动换行。
word-break: break-all：强制文本在单词内部换行，适用于处理长单词或 URL。
overflow-wrap: break-word：仅在必要时（如单词过长超出容器宽度）才允许单词内部换行。
<br> 标签：HTML 中的换行标签，用于在指定位置强制换行。

上一篇：css flex 布局

下一篇：css disabled