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

4、参考tailwindcss.css 命名，整合为常用css

// 单行文本溢出隐藏
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 多行文本溢出隐藏
// 最多显示2行
.truncate-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /*限制文本行数*/
  -webkit-box-orient: vertical;
}

flex布局失效可以参考：https://blog.csdn.net/mouday/article/details/123942878

参考

• 文本超出两行显示省略号插件Clamp.js
• 深入扩展文本溢出解决方案
• https://www.tailwindcss.cn/docs/text-overflow