换行，不换行，超出显示省略号

强制换行

word-wrap:break-word;   （单词换行）

word-break:break-all;      （单个字符换行）

 

强制不换行

white-space:nowrap;

 

单行文字超出显示省略号（注意：配合宽度）

overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

 

多行文本超出显示省略号

display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;

 

显示省略号的兼容写法（这种写法简单兼容性能好，缺点是有底色，如果有字少的情况省略号还是存在）

.text { width: 500px;word-break: break-all;height: 44px;position: relative;line-height: 21px;}
.text:after{content: '...';position: absolute;bottom: 4px;right: 0;background: #fff;}

单行兼容写法

.slh{
　　width:160px;height:50px;line-height:25px;border:4px solid #eee;
　　white-space:nowrap;/*强制文本在一行内显示*/
　　text-overflow:ellipsis; /*溢出省略号，支持ie、safari（webkit）*/
   -o-text-overflow:ellipsis; /*溢出省略号，支持opera*/
   overflow:hidden;/*溢出隐藏*/
   -moz-binding:url('ellipsis.xml#ellipsis');/*溢出省略号，支持firefox*/
}