文字超出显示...这种用法还是很常见的，最方便的写法是直接用css方法，具体写法见另一篇随笔：https://www.cnblogs.com/sherryweb/p/12759807.html
然而这种css写法，IE浏览器好多时候是不识别的，那么就可以使用一些插件来实现：
如：clamp.js 连接：https://github.com/josephschmitt/Clamp.js/blob/master/clamp.js
demo如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Clamp.js Example 1</title> </head> <body> <style> body { width: 300px; } </style> <h1>Curabitur magna lectus, cursus at euismod sed, aliquet a lectus. Vivamus ac magna purus, in eleifend eros.</h1> <div> <p>Quisque pellentesque dui sit amet nisl sollicitudin faucibus. Ut est mauris, vestibulum ullamcorper feugiat consectetur, ullamcorper eu lorem. Mauris congue convallis felis sit amet scelerisque. Etiam sed sodales orci. Ut porta massa commodo turpis dictum suscipit. Quisque sit amet metus eget arcu lacinia pellentesque. Aliquam aliquam tortor nec odio tempus non pharetra ipsum ultricies. Aenean pretium tristique orci vitae tempus. Sed vitae quam ut felis aliquam blandit nec et odio. Mauris at magna odio, at mattis risus. Phasellus eu enim mi, sit amet hendrerit est. Integer egestas consectetur blandit. Etiam odio nibh, fermentum non venenatis nec, dictum vel ligula. Quisque rutrum imperdiet arcu at ultricies. Integer in diam ut elit euismod posuere et id sapien. Cras ligula leo, hendrerit vitae sagittis nec, commodo sed lacus. In aliquam pretium mauris sed ullamcorper. Phasellus fermentum iaculis massa ac condimentum. Ut nisl turpis, vulputate in rhoncus sed,</p> <ul><li>elementum eget</li><li>massa. Sed a diam</li><li>dui, in <a href="#">iaculis felis.</a></li></ul> </div> <script src="../clamp.js"></script> <script> var header = document.getElementsByTagName('body')[0].getElementsByTagName('h1')[0], paragraph = document.getElementsByTagName('body')[0].getElementsByTagName('div')[0]; $clamp(header, {clamp: 1, useNativeClamp: false}); $clamp(paragraph, {clamp: 10, useNativeClamp: false, animate: true}); </script> </body> </html>
demo来源：https://github.com/josephschmitt/Clamp.js
如果不考虑IE10以下的浏览器，可以用另一种css方法来实现兼容：（IE10以下不识别）
.line-clamp{
font-size: 14px;
color: #333;
overflow: hidden;
line-height: 30px;
position: relative;
height: 60px;
}
.line-clamp:after {
content: '...';
text-align: right;
position: absolute;
bottom: 0;
right: 0;
10%;
height: 1.8em;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
这里的后面...的背景色是白色渐变，可根据实际情况修改颜色