在一些标题、简介等内容时,当内容超过一个范围后就会把内容隐藏并显示省略号。

实现比较简单,直接上代码。

显示单行文本

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  • 使用overflow: hidden把超出的内容进行隐藏;
  • 然后使用white-space: nowrap设置内容不换行;
  • 最后使用text-overflow: ellipsis设置超出内容为省略号

固定多行文本

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2; 
  • -webkit-line-clamp;用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
  • display: -webkit-box;必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  • -webkit-box-orient;必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
  • overflow: hidden;把超出的内容进行隐藏;