版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yun1996/article/details/84787663
标签自动换行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<div>
<span style="display:inline-block;width:60px;word-wrap:break-word;white-space:normal;">span标签换行span标签换span标签换span标签换</span>
<br />
<span style="display:inline-block;width:10%;word-wrap:break-word;white-space:normal;">span标签换行span标签换span标签换span标签换</span>
</div>
<body>
</body>
</html>
1.首先把span变成块级元素 display:inline-block
2.## 标题设置宽度，
一定保证宽度是一定的，百分数时，如果父级元素的宽度是可以改变的，那么span的宽度随之改变 width:10% width:60px
3.设置内容自动换行，word-wrap属性
word-wrap有两个取值：
1、word-wrap: normal：仅仅在同意的断字点换行（浏览器保持默认处理）。
2、word-wrap: break-word：在长单词或 URL 地址内部进行换行。（即在容器末端有长单词不能全然显示，不会截断单词，而是作为总体，自己主动换行）
4.设置空白的处理 ，white-space属性
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |