文字多行省略号

.clamp-ellipsis{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}           

優點 ：

從效果上來看，它的優點有：

1. 響應式截斷，根據不同寬度做出調整
2. 文本超出範圍才顯示省略号，否則不顯示省略号
3. 浏覽器原生實作，是以省略号位置顯示剛好

缺點 ：

但是缺點也是很直接，因為 -webkit-line-clamp 是一個不規範的屬性，它沒有出現在 CSS 規範草案中。也就是說隻有 webkit 核心的浏覽器才支援這個屬性，像 Firefox, IE 浏覽器統統都不支援這個屬性，浏覽器相容性不好。

使用場景：多用于移動端頁面，因為移動裝置浏覽器更多是基于 webkit 核心，除了相容性不好，實作截斷的效果不錯。

文字單行省略号

.ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}