HTML單行、多行超出不換行顯示省略号使用Clamp.js相容IE

1、單行超出不換行，顯示省略号

width: 770px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;      

2、多行超出不換行，顯示省略号

width: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /*限制文本行數*/
-webkit-box-orient: vertical;      

3、相容萬惡的IE

使用這幾條css屬性不相容火狐和IE 是以采用插件的形式

可以使用 Clamp.js

https://github.com/josephschmitt/Clamp.js

代碼示例

var titles = document.getElementsByClassName("p-title");
for (var i = 0; i < titles.length; i++){
    // 顯示3行
    $clamp(titles[i], {clamp: 3});
}      

實踐發現：

1. Clamp.js的表現不是太好
2. 在 IE11下

   -webkit-line-clamp: 2

   也是可以生效的，不過不顯示

   ...

   ，重要的是需要設定【元素寬度】

其他元件

HeyUI：

https://www.heyui.top/component/other/textellipsis

vue-text-ellipsis：

https://github.com/Luobata/vue-text-ellipsis

參考

文本超出兩行顯示省略号插件Clamp.js 深入擴充文本溢出解決方案