多行文本显示省略号

2019-04-09279次阅读css3css
p{
  display:-webkit-box;
  overflow:hidden;
  text-overflow:ellipsis;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

看前缀webkit就知道属于webkit内部属性,只支持webkit内核浏览器,移动端可以放心使用。

重点是-webkit-line-clamp需配上overflow:hidden;text-overflow: ellipsis;和伸缩合模型当中的两个属性display: -webkit-box;-webkit-box-orient: vertical;如果你要二行溢出显示省略号,那么-webkit-line-clamp:2,依次类推,三行就是3、四行就是4。。。

上一篇: gulp4.0报错The following tasks did not complete  下一篇: 触摸事件(touch)事件简述  

多行文本显示省略号相关文章