在开发web页面的时候经常会遇到文本溢出的问题，如果任由它，那么就会使页面的布局被打破；如果文本标签h1~h6/P/span被我们设置了高度，然后溢出隐藏，这样也能实现视觉效果上的美化，今天就给大家总结一下另外的一种处理办法，文本溢出出现省略号。

单行文本溢出文本显示省略号

  • .ellipsis {   display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

多行文本溢出文本显示省略号

  • .ellipsis { display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

  1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
  2. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  3. -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。