文字超出省略號表示的幾種方法

這是常常會用到的樣式

單行：

必需要設置文本高度

.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;
}