單行文本

單行文本溢出顯示省略號比較簡單，主要就三行代碼。

p {
    width: 300px;
    overflow: hidden;
    /*文本不會換行*/
    white-space: nowrap;
    /*當文本溢出包含元素時，以省略號表示超出的文本*/
    text-overflow: ellipsis;
  }

效果：

多行文本

• 方法一
  對于多行文本，一種方法是使用webkit的css擴展屬性，該方法適用于Safari、chrome和大多數移動端瀏覽器。

p {
    width: 300px;
    overflow: hidden;
    /*將對象作為彈性伸縮盒子模型顯示*/
    display: -webkit-box;
    /*設置子元素排列方式*/
    -webkit-box-orient: vertical;
    /*設置顯示的行數，多出的部分會顯示為...*/
    -webkit-line-clamp: 3;
  }

效果：

• 方法二
  使用偽元素實現，將偽元素放在最后一個字的上方，達到顯示省略號的目的。該方法兼容性較好，但文字未超出的情況下也會出現省略號。

p {
    position: relative;
    line-height: 1.2em;
    max-height: 3.6em;
    width: 300px;
    /*設置文本為兩端對齊*/
    text-align: justify;
    overflow: hidden;
  }
  
  p::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    /*將省略號的大小設置為1個字體大小*/
    width: 1em;
    /*設置背景，將最后一個字覆蓋掉*/
    background: #fff;
  }

效果：

• 方法三：
  使用插件jQuery.dotdotdot，下載及詳細文檔地址：http://dotdotdot.frebsite.nl/。

p {
    width: 300px;
    max-height: 3em;
    text-align: justify;
    overflow: hidden;
}

// js部分代碼
$(document).ready(function() {
  $("p").dotdotdot();
});

效果：