1、单行文本溢出

 文本内容

     
                         　　HelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorld
     

固定文本宽度，且保证文本不换行，溢出的部分隐藏，设置text-overflow为ellipsis则溢出的文本以省略号显示

.singleLine{
      width:200px;  padding: 10px;  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;}

显示效果如图

2、多行文本溢出

 文本内容

     
          HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld
     

多行文本显示时通过-webkit-line-clamp设置显示的行数，并且设置display为-webkit-box，-webkit-box-orient为vertical

.multiLine{
      width:200px;   padding:0 10px;  overflow : hidden;   text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical; }

显示效果

 3、跨浏览器

.imitate_ellipsis{
     position:relative;  line-height:1.4em;  height:2.8em;  overflow:hidden;  width:200px; }.imitate_ellipsis::after{
     content:"...";  font-weight:bold;  position:absolute;  bottom:0;  right:0;  padding-left:20px;  background: -webkit-linear-gradient(left, transparent, #fff 0%);  background: -o-linear-gradient(right, transparent, #fff 0%);  background: -moz-linear-gradient(right, transparent, #fff 0%);  background: linear-gradient(to right, transparent, #fff 0%);}

通过伪类::after在文本后加入省略号