CSS 如何使标签中的文本自动换行

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

什么是标签？

标签是HTML中用于创建超链接的标签，它可以用来链接到其他网页、文件或位置。例如，在以下代码中，我们使用标签创建一个超链接到百度的网页：

<a href="https://www.baidu.com">百度</a>

为什么需要 标签中的文本自动换行？

当标签中的文本内容很长时，它可能会超出父元素的宽度。这种情况下，如果不作处理，文本将会溢出显示区域，破坏了页面的布局。为了解决这个问题，我们可以使用CSS的word-wrap属性来使文本自动换行。

使用CSS的`word-wrap`属性使文本自动换行

CSS的word-wrap属性用于指定是否允许浏览器在单词内断行。通过将word-wrap属性设置为break-word，我们可以实现文本在标签中自动换行。例如，下面的CSS样式将使标签中的文本自动换行：

a {
  word-wrap: break-word;
}

现在，无论标签中的文本有多长，它都会在单词内断行，而不会溢出父元素的宽度。

示例

为了更好地理解如何使用CSS的word-wrap属性使文本自动换行，让我们通过一个示例来演示。

<!DOCTYPE html>
<html>
<head>
  <style>
a {
  word-wrap: break-word;
  width: 200px;
  border: 1px solid black;
  padding: 10px;
}</style>
</head>
<body>
  <a href="#">这是一个非常长的超长文本链接示例，将会在<a>标签中自动换行</a>
</body>
</html>

在上面的示例中，我们使用CSS样式将标签的宽度设置为200px，并添加了边框和内边距，以更清晰地显示效果。当我们运行这段代码时，可以看到文本在200px宽度的容器内自动换行。