在开发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 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。