单行、多行文本省略号

在我们做项目的时候文本省略号是很常见的，主要代码如下所示：

• 单行文本省略号

  <div class="box">
      <p>文本省略号文本省略号文本省略号文本省略号文本省略号文本省略号文本省略号
          文本省略号文本省略号文本省略号文本省略号文本省略号文本省略号文本省略号</p>
  </div>
  

  .box p{
      width: 200px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      /*注意：以上4个条件缺一不可*/
      border:1px solid #ccc;
  }
  

  效果图
  

• 多行文本省略号

  <div class="Box">
      <p>文本省略号文本省略号文本省略号文本省略号文本省略号文本省略号文本省略号文本省略号文本省略号文本省略号</p>
  </div>
  

  .Box p{
       width:200px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        border:1px solid #ccc;
    }
  

  $\color{red}{注意：}$

  • 多行文本省略号不能设置固定的高度，不然超出的部分不会隐藏的。

  • -webkit-line-clamp用来限制在一个块元素显示的文本的行数。

  • display: -webkit-box;将对象作为弹性伸缩盒子模型显示。

  • -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 。

    同样也是4个条件缺一不可

  效果图
  

  扫描二维码关注公众号，回复： 8697932 查看本文章