span 标签 文字自动换行

span{
      display: inline-block;
      width: 302px;
      white-space: pre-wrap;
}

 CSS  white-space 属性 

 指定元素内的空白怎样处理

 属性值:

normal: 默认值。空白会被浏览器忽略

nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止

pre: 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签

pre-line: 合并空白符序列，但是保留换行符。

pre-wrap:  保留空白符序列，但是正常地进行换行。

initial: 规定应该从父元素继承 white-space 属性的值

break-spaces : 与 pre-wrap的行为相同，除了：任何保留的空白序列总是占用空间，包括在行尾。
每个保留的空格字符后都存在换行机会，包括空格字符之间。这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小).