CSS 设置超长字符串自动换行

在本文中，我们将介绍如何使用CSS来实现超长字符串的自动换行效果。

阅读更多：CSS 教程

什么是超长字符串

超长字符串指的是在网页中显示的字符串长度超过了容器的宽度，导致字符串无法完整显示在一行中。

CSS 中的 word-wrap 属性

CSS中的 word-wrap 属性可以用来控制超长字符串的自动换行效果。它有两个可选值：

normal：默认值，表示字符串不会强制换行，而是超出容器宽度后继续显示在一行中。
break-word：表示字符串会在容器宽度不足时自动换行，以确保整个字符串能够完整显示在容器内。

下面是一个示例：

<style>
  .container {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    word-wrap: break-word;
  }
</style>

<div class="container">
  This is a very long string that needs to be wrapped because it exceeds the container width.
</div>

在上述示例中，我们给一个固定宽度的容器设置了 word-wrap: break-word; 属性。当容器宽度不足以容纳整个字符串时，字符串会自动换行，确保完整显示在容器内。如果删除 word-wrap 属性或者将其设置为 normal，那么字符串将会继续显示在一行中，超出容器宽度的部分则会被隐藏。

CSS 中的 overflow-wrap 属性

在 CSS3 中，word-wrap 属性被 overflow-wrap 属性所取代，两者的作用相同，只是名称不同。所以在最新的 CSS 规范中，建议使用 overflow-wrap。

以下是 overflow-wrap 属性的示例：

<style>
  .container {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    overflow-wrap: break-word;
  }
</style>

<div class="container">
  This is a very long string that needs to be wrapped because it exceeds the container width.
</div>

在上述示例中，我们同样给一个固定宽度的容器设置了 overflow-wrap: break-word;，并且字符串会自动换行以确保完整显示在容器内。

CSS 中的 white-space 属性

除了使用 word-wrap 或 overflow-wrap 属性之外，我们还可以使用 white-space 属性来处理超长字符串的换行问题。white-space 属性有以下常用的取值：

normal：默认值，字符串不会强制换行，继续显示在一行中。
nowrap：字符串不会换行，超出容器宽度部分会被隐藏。
pre：字符串保留换行符和空格，会按照文本格式进行自动换行。
pre-wrap：字符串保留换行符和空格，但会自动换行以确保完整显示在容器内。
pre-line：字符串保留换行符，但连续空格会被合并成一个空格，自动换行。

以下是 white-space 属性的示例：

<style>
  .container {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    white-space: pre-wrap;
  }
</style>

<div class="container">
  This is a very long string that needs to be wrapped because it exceeds the container width.
</div>

在上述示例中，我们给一个固定宽度的容器设置了 white-space: pre-wrap; 属性，字符串会保留换行符并自动换行以确保完整显示在容器内。