多行或者單行文本超出顯示點(diǎn)點(diǎn)點(diǎn)，如果保證內(nèi)容始終垂直居中？

sydMobile 發(fā)布于2019-04-23 13:09 / 2368人閱讀

摘要：我現(xiàn)在的需求是這樣的，我目前實(shí)現(xiàn)了一個(gè)框，顯示文字，超出兩行顯示，如果單行要保證垂直居中，我如果給容器使用則當(dāng)文字內(nèi)容過多的時(shí)候會不上下文字有截?cái)喱F(xiàn)在效果如下只能顯示兩行，超出顯示省略號解決方法垂直居中的

我現(xiàn)在的需求是這樣的，我目前實(shí)現(xiàn)了一個(gè)div框，顯示文字，超出兩行顯示...，如果單行要保證垂直居中，我如果給容器使用display:flex;align-items:center；則當(dāng)文字內(nèi)容過多的時(shí)候會不上下文字有截?cái)啵?/p>

現(xiàn)在效果如下：

.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 indiv>
div>

解決方法：

display:flex；垂直居中的是里面元素的居中，那就給外層div一個(gè)固定高度這里是兩行文字的行高，里面文字不要給高度，當(dāng)有一行的時(shí)候里面的div高度就是一行的高度就會垂直居中，有兩行文字的時(shí)候就會顯示兩行的文字，并且不影響超出顯示點(diǎn)點(diǎn)點(diǎn)的效果；

修改后的樣式：

.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;
      }
    }