HTML/CSS教程
当前位置:主页 > HTML/CSS教程 >
CSS实现超出的文字用省略号代替
时间:2018年09月27日 来源:原创 作者:大葱 浏览:

  只需要三行代码就能实现
  overflow:hidden;/*超出部分隐藏*/
  white-space:nowrap;/*不换行*/
  text-overflow:ellipsis;/*超出部分文字以...显示*/
 
  但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。
  接下来重点说一说多行文本溢出显示省略号,如下。
 
  实现方法:
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;

       补充:添加属性width:2em,可以设置字符的数量,如想在单行中最多显示4个字,可以添加width:4em;
 
  适用范围: 因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
  注:
  -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
  display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

推荐文章