多行或者单行文本超出两行显示点点点，如果保证内容始终垂直居中？

蓓蕾心晴

发布于 2018-12-19 08:27:44

1.9K00

代码可运行

文章被收录于专栏：前端小叙前端小叙

运行总次数：0

代码可运行

我现在的需求是这样的，我目前实现了一个div框，显示文字，超出两行显示...，如果单行要保证垂直居中，我如果给容器使用display:flex;align-items:center；则当文字内容过多的时候会不上下文字有截断；

现在效果如下：

.info_des {
      .margin-all(10, 10, 12, 8);
      display: flex;
      align-items:center;
      div{
        .line-height(21);
        .height(42);
        .font-size(14);
        color: #000;
        letter-spacing: 0.01px;
      }
    }
    
/*只能显示两行，超出显示省略号*/
.line_clamp2{
    overflow: hidden!important;
    text-overflow: ellipsis!important;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-wrap: break-word;
}

<div class="info_des">
        <div class="line_clamp2">is the leading online shopping platform in is the leading online shopping platform inis the leading online shopping platform in</div>
</div>

解决方法：

display:flex；垂直居中的是里面元素的居中，那就给外层div一个固定高度这里是两行文字的行高，里面文字不要给高度，当有一行的时候里面的div高度就是一行的高度就会垂直居中，有两行文字的时候就会显示两行的文字，并且不影响超出显示点点点的效果；

修改后的样式：

.info_des {
      .margin-all(10, 10, 12, 8);
      display: flex;
      align-items:center;
      .height(42);
      div{
        .line-height(21);
        .font-size(14);
        color: #000;
        letter-spacing: 0.01px;
      }
    }