CSS HTML 文本换行而不是水平溢出

在本文中，我们将介绍如何使用 CSS 和 HTML 来实现文本换行而不是水平溢出的效果。有时候，在页面中的输入框或者其他元素中输入的文本内容过长时，我们希望能够自动换行显示，而不是出现水平溢出的情况。我们将通过一些示例来说明如何使用 CSS 的属性和值来实现这一效果。

阅读更多：CSS 教程

使用 CSS 的 white-space 属性

CSS 的 white-space 属性用于指定元素中的空白如何处理，其中包括文本的换行。有三个可能的值可以应用于 white-space 属性：

normal：默认值，文本会根据需要进行换行。该值会忽略文本中的连续空白和换行符。
nowrap：文本不会换行，而是一直保持在一行内显示。如果内容太长，会导致溢出。
pre-wrap：文本会进行换行，但连续空白和换行符会被保留。

下面是一个示例，展示了如何使用 white-space 属性来实现文本换行而不是溢出的效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    .text-wrap {
      white-space: pre-wrap;
      width: 200px;
    }
  </style>
</head>
<body>
  <div class="text-wrap">
    This is a long text that should wrap instead of overflowing horizontally.
  </div>
</body>
</html>

在上述示例中，我们通过设置 white-space 为 pre-wrap，使得文本可以换行显示。通过设置 div 元素的宽度为 200px，当文本内容超过这个宽度时，就会自动进行换行。

使用 CSS 的 word-wrap 属性

除了 white-space 属性外，CSS 还提供了 word-wrap 属性，用于指定文本在超出容器宽度时是否应该换行。该属性有两个可能的值：

normal：默认值，文本会在单词之间进行换行，以防止溢出。
break-word：文本会在单词内部进行换行，以适应容器的宽度。

下面是一个示例，展示了如何使用 word-wrap 属性来实现文本换行而不是溢出的效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    .text-wrap {
      word-wrap: break-word;
      width: 200px;
    }
  </style>
</head>
<body>
  <div class="text-wrap">
    This is a long text that should wrap instead of overflowing horizontally.
  </div>
</body>
</html>

在上述示例中，我们通过设置 word-wrap 为 break-word，使得文本可以在单词内部进行换行。通过设置 div 元素的宽度为 200px，当文本内容超过这个宽度时，就会自动进行换行。

结合 white-space 和 word-wrap 属性

在某些情况下，结合使用 white-space 和 word-wrap 可以获得更好的效果。下面是一个示例，展示了如何结合使用这两个属性来实现文本换行而不是溢出的效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    .text-wrap {
      white-space: pre-wrap;
      word-wrap: break-word;
      width: 200px;
    }
  </style>
</head>
<body>
  <div class="text-wrap">
    This is a long text that should wrap instead of overflowing horizontally.
  </div>
</body>
</html>

在上述示例中，我们通过同时设置 white-space 为 pre-wrap 和 word-wrap 为 break-word，使得文本可以根据需要进行换行，并在单词内部进行换行以适应容器的宽度。通过设置 div 元素的宽度为 200px，当文本内容超过这个宽度时，就会自动进行换行。