我現在的需求是這樣的，我目前實現了一個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;
      }
    }