css实现强制不换行 溢出显示点点点（...）多行溢出显示(...)

介绍

1.自动换行：
word-wrap:break-word;
word-break:normal;
2.强制换行：
word-break:break-all; 按字符截断换行 /* 支持IE和chrome，FF不支持*/
word-wrap:break-word; 按英文单词整体截断换行 /* 以上三个浏览器均支持 */
* 注意：单词换行需要父盒子为块级元素
3.强制不换行：
white-space:nowrap;

属性规定当文本溢出包含元素时发生的事情。

text-overflow: clip|ellipsis|string;

常用场景

width:100px;/*要显示文字的宽度*/
text-overflow :ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
white-space :nowrap; /*让文字不换行*/
overflow : hidden; /*超出要隐藏*/

overflow : hidden; /*超出要隐藏*/

多行文本溢出显示(…)

div {
	  width: 300px;
      height: 40px;
      /* white-space: nowrap; */
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
}

适用范围：

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注意

ie核心的浏览器一定要定义line-height与高度，-webkit-line-clamp意思就是几行，例如
line-height: 20px;
max-height: 40px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

标题结尾

这个应用场景还行，
也不太常写。
写个博客记录下来
过段时间在补充多行的