美文网首页
css 设置文本单行显示超出省略号显示

css 设置文本单行显示超出省略号显示

作者: 代码使劲儿搬 | 来源:发表于2020-07-16 14:37 被阅读0次

单行显示

.text{
  overflow:hidden; /*超出的文本隐藏*/
  text-overflow:ellipsis; /*溢出用省略号显示*/
  white-space:nowrap; /*溢出不换行*/
}

两行显示

.text{
  overflow: hidden;
  text-overflow: ellipsis;
  display:-webkit-box; /*作为弹性伸缩盒子模型显示。*/
  -webkit-box-orient:vertical; /*设置伸缩盒子的子元素排列方式--从上到下垂直排列*/
  -webkit-line-clamp:2; /*显示的行*/
}

相关文章

网友评论

      本文标题:css 设置文本单行显示超出省略号显示

      本文链接:https://www.haomeiwen.com/subject/zqmphktx.html