CSS span文字自动换行

在本文中，我们将介绍如何在使用CSS span标签时自动换行文字。

阅读更多：CSS 教程

什么是CSS span标签

CSS span标签是一个内联元素，它用于在行内对文本进行样式处理，比如颜色、字体、大小等。在HTML中，我们可以使用标签来创建一个span元素。

例如：

<span>这是一个span元素</span>

CSS span标签的自动换行问题

由于CSS span标签是一个行内元素，所以当文本内容超出了元素的宽度时，CSS span标签的默认处理方式是将文本内容一直显示到末尾，不会自动换行。这种处理方式可能会导致页面布局异常和用户体验不佳。

例如：

<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>

当文本内容超出span元素的宽度时，浏览器会将文本内容一直显示到末尾。

如何实现CSS span标签的文字自动换行

为了解决CSS span标签的自动换行问题，我们可以使用CSS中的word-wrap属性和white-space属性来实现。

使用word-wrap属性

word-wrap属性用于控制长单词或 URL 地址是否允许拆分换行，可设置以下值：

normal：默认值。只在允许的断字点换行（除了 CJK 文字之外）。
break-word：在长单词或 URL 地址内部进行换行。

例如：

span {
  word-wrap: break-word;
  width: 100px;
}

当文本内容超出span元素的宽度时，使用word-wrap: break-word;属性将会在长单词或 URL 地址内部进行换行。

使用white-space属性

white-space属性用于设置如何处理元素中的空白符，可设置以下值：

normal：默认值。空白符被浏览器忽略。
pre：空白符会被浏览器保留。
nowrap：强制在同一行内不换行。
pre-wrap：保留空白符，但允许换行。
pre-line：空白符被浏览器忽略，但允许换行。

例如：

span {
  white-space: pre-wrap;
  width: 100px;
}

当文本内容超出span元素的宽度时，使用white-space: pre-wrap;属性将会保留空白符，但允许换行。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>CSS span文字自动换行</title>
    <style>
    span {
      word-wrap: break-word;
      white-space: pre-wrap;
      width: 100px;
      border: 1px solid #ccc;
      padding: 5px;
    }
    </style>
</head>
<body>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</body>
</html>