CSS 文本自动换行

在本文中，我们将介绍如何使用 CSS 让文本在达到一定字符数后自动换行到新的一行。

阅读更多：CSS 教程

CSS `word-wrap` 属性

word-wrap 是一个 CSS 属性，用于控制文本在换行时的行为。它有两个可选值：

normal（默认值）：当单词长度超过容器宽度时，文本会溢出容器。
break-word：当单词长度超过容器宽度时，文本会强制换行到下一行。

示例代码如下：

/* 将文本在达到一定字符数后自动换行到新的一行 */
.wrap-text {
  word-wrap: break-word;
}

<!-- 示例文本 -->
<div class="wrap-text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula vehicula urna, vel mattis elit lobortis id. Sed tincidunt ultrices mi, quis hendrerit velit ultricies nec. Proin ut nunc sed leo ultrices eleifend vitae ac felis. Pellentesque viverra erat vitae finibus dapibus. Nullam faucibus bibendum sapien, id vehicula erat faucibus auctor. Etiam sed mollis lectus, sit amet condimentum urna.
</div>

在上述示例中，当文本超过容器宽度时，文本会自动换行到新的一行。

CSS `overflow-wrap` 属性

除了 word-wrap 属性外，CSS 还提供了 overflow-wrap 属性来控制文本在换行时的行为。

overflow-wrap 有两个可选值：

normal（默认值）：当单词长度超过容器宽度时，文本会溢出容器。
break-word：当单词长度超过容器宽度时，文本会强制换行到下一行。

示例代码如下：

/* 将文本在达到一定字符数后自动换行到新的一行 */
.wrap-text {
  overflow-wrap: break-word;
}

<!-- 示例文本 -->
<div class="wrap-text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula vehicula urna, vel mattis elit lobortis id. Sed tincidunt ultrices mi, quis hendrerit velit ultricies nec. Proin ut nunc sed leo ultrices eleifend vitae ac felis. Pellentesque viverra erat vitae finibus dapibus. Nullam faucibus bibendum sapien, id vehicula erat faucibus auctor. Etiam sed mollis lectus, sit amet condimentum urna.
</div>

以上示例中，当文本超过容器宽度时，文本会自动换行到新的一行。

CSS `word-break` 属性

除了 word-wrap 和 overflow-wrap 属性外，CSS 还提供了 word-break 属性来控制文本在换行时的行为。

word-break 有四个可选值：

normal（默认值）：使用默认的换行规则，通常在单词之间进行换行。
break-all：在单词内部也可以进行换行，但只有在必要时才会这样做。
keep-all：只在东亚文字（例如中文、日文和韩文）的非拉丁字符之间换行。
break-word：将文本在达到一定字符数后自动换行到新的一行。

示例代码如下：

/* 将文本在达到一定字符数后自动换行到新的一行 */
.wrap-text {
  word-break: break-word;
}

<!-- 示例文本 -->
<div class="wrap-text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula vehicula urna, vel mattis elit lobortis id. Sed tincidunt ultrices mi, quis hendrerit velit ultricies nec. Proin ut nunc sed leo ultrices eleifend vitae ac felis. Pellentesque viverra erat vitae finibus dapibus. Nullam faucibus bibendum sapien, id vehicula erat faucibus auctor. Etiam sed mollis lectus, sit amet condimentum urna.
</div>

在以上示例中，当文本超过容器宽度时，文本会自动换行到新的一行。

总结

通过使用 CSS 的 word-wrap、overflow-wrap 和 word-break 属性，我们可以在文本达到一定字符数后，使其自动换行到新的一行。这些属性给予了我们很大的灵活性来控制文本的换行行为，以适应各种设计需求和展示要求。同时，我们也可以根据具体情况选择使用合适的属性来实现所需的效果。

希望本文对你在 CSS 中控制文本自动换行有所帮助！