span文本溢出显示...及span换行

span标签中实现换行

sapn{

  word-break: normal;

  display: block;

  white-space: pre-wrap;

  word-wrap: break-word;
 
  overflow: hidden;

  width: 20%;

}

white-space： 通过HTML文档的源代码排版方式控制页面显示文本的排版方式

取值：normal|pre|nowrap|pre-wrap|pre-line|inherit

normal:正常无变化（默认处理方式，文本按自动处理换行，加入抵达容器边界内容自动换到下一行）

pre：保持HTML源代码空格与换行，等同与pre标签

nowarp：强制文本在一行，除非遇到br换行标签

pre-wrap：和pre相同，但是遇到超出容器范围的时候会自动换行

pre-line：和pre相同，到那时遇到连续空格会被当成一个空格

inherit：继承

**word-break：**属性规定自动换行的处理方法

取值：normal|break-all|keep-all;

nomral：使用浏览器默认的换行规则

break-all：允许在单词内换行

keep-all：只能在半角空格或连字符处换行。

word-wrap： 属性允许长单词或 URL 地址换行到下一行。

取值：normal|break-word;

normal：只在允许的断字点换行

break-word：在长单词或URL地址内部进行换行

span标签中文本溢出显示…

.text-overflow{

  text-overflow: ellipsis;

  overflow: hidden;

  white-space: nowrap;

}