兼容性不好：*注意容器不要使用padding-bottom，否则多出的文字会显示

  1. overflow: hidden;
  2. text-overflow: ellipsis;
  3. display: -webkit-box;
  5. -webkit-line-clamp: 3;
  7. -webkit-box-orient: vertical;

第二种办法：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <Meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         #view{
  12.             line-height: 25px;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17. <div id='view' style='border:1px solid red;width:200px;height:50px;overflow:auto'></div>
  18. <script>
  19.     s = '这是一个文本这是一个文本这是一个ssssss文本这是一个文本sss这是一个文本这是一个文本'
  20.     el = document.getElementById('view');
  21.     n = el.offsetHeight;
  22.     for(i=0; i<s.length; i++) {
  23.         el.innerHTML = s.substr(0,i);
  24.         if(n < el.scrollHeight) {
  25.             el.style.overflow = 'hidden';
  26.             el.innerHTML = s.substr(0,i-3) + '...';
  27.             break;
  28.         }
  29.     }
  30. </script>
  31. </body>
  32. </html>

首先我们需要弄清楚offsetHeight和scrollHeight所表示的高度：

1溢出显示滚动条时——-scrollHeight>offsetHeight
2没有溢出时——scrollHeight=offsetHeight
el = document.getElementById(‘view’); n = el.offsetHeight;表示的是取到当前包裹文本的父级元素的高度， el.innerHTML = s.substr(0,i);表示在for循环中取出长度递增的文段， ‘这’—> ‘这是’ —> ‘这是一’，当n < el.scrollHeight也就是 当前文本高度<滚动条内的内容的高度，代表着刚好达到溢出的界限，此时执行if内的语句el.style.overflow = ‘hidden’;el.innerHTML = s.substr(0,i-3) + ‘…’; break;将父级元素view的overflow设置为hidden，并且将末尾的三个文字用…取代，同时跳出for循环