css(3)基础知识查漏补缺

css解决文本溢出的问题

单行溢出显示省略号

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。
实现方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap;

多行文本溢出显示省略号

css方法有兼容性问题，只适用Chrome浏览器，所以用js实现

<body>
      <div id='view' style='border:1px solid red;200px;height:70px;overflow:auto'></div>
<script>
    var s= '非常高兴你能看到这篇文章，我是你的老朋友技术胖。在写Vue教程的时候，我发现群里的小伙伴大多数还在使用ES5来进行编写，使用ES5这无可厚非，因为ES5毕竟还是主流，速度也更快，但ES6引入的新特性是ES5无法比拟的，所以我鼓励前端小伙伴多使用ES6的语法，这也是我开这篇教程的初衷。我是一个前端工程师，接触IT这一行也有10年了，我会把我在前端这条路上碰到的沟沟坎坎都免费的分享给大家，我并不是什么讲师，至今还奋斗在程序第一线，所以视频是我利用业余时间录制。在视频的学习中如果你有任何疑问可以加QQ群(364140450)进行讨论。非常高兴你能看到这篇文章，我是你的老朋友技术胖。在写Vue教程的时候，我发现群里的小伙伴大多数还在使用ES5来进行编写，使用ES5这无可厚非，因为ES5毕竟还是主流，速度也更快，但ES6引入的新特性是ES5无法比拟的，所以我鼓励前端小伙伴多使用ES6的语法，这也是我开这篇教程的初衷。我是一个前端工程师，接触IT这一行也有10年了，我会把我在前端这条路上碰到的沟沟坎坎都免费的分享给大家，我并不是什么讲师，至今还奋斗在程序第一线，所以视频是我利用业余时间录制。在视频的学习中如果你有任何疑问可以加QQ群(364140450)进行讨论。'
    var el = document.getElementById('view');
    var n = el.clientHeight;
    for(i=0; i<s.length; i++) {
          el.innerHTML = s.substr(0, i);
          if(n < el.scrollHeight) {
                 el.style.overflow = 'hidden';
                 el.innerHTML = s.substr(0, i-3) + '...';
                 break;
             }
    }
</script>
</body>