文字超出省略号表示的几种方法

这是经常会用到的样式

单行：

必须要设置文本高度

.text{
  width:100%;
  height:30px;
  line-height:30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

　

多行：

.text{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;  /*设置行数*/
    display:-webkit-box;   /*这行是关键，虽然不知道是什么意思*/
}

 方法好用，但不兼容IE，因为webkit是css的扩展属性，只适用于移动端和webkit浏览器。

辣么，要兼容IE怎么办呢，方法总是有的，我们的css还有伪类这一说，兼容性好，但缺点也有，就是文字不会超出的时候也会有省略号。

.text{
   position: relative;
   line-height: 32px;
   max-height: 32px;
   overflow: hidden;
}
.text:after{
   content: "...";
   position: absolute;
   bottom: 0;
   right: 0;
}