換行，不換行，超出顯示省略號

強制換行

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*/
}