flex布局實現(xiàn)左側(cè)筆墨溢出省略右側(cè)筆墨自適應(yīng)

想要實現(xiàn)一個左側(cè)筆墨可以根據(jù)筆墨長短主動調(diào)整寬度，當(dāng)一行表現(xiàn)不下時，不擠壓右側(cè)筆墨空間，左側(cè)筆墨溢出省略。同理當(dāng)右側(cè)筆墨變長的時候，右側(cè)筆墨全表現(xiàn)，左側(cè)筆墨被擠壓后溢出省略的結(jié)果。我說的可能不是很清楚，讓我們看看結(jié)果圖吧。

1.右側(cè)筆墨是多少就是多寬，左側(cè)默認(rèn)占有剩余的所有空間。

2.右側(cè)筆墨是多少就是多寬，和1一樣。左側(cè)筆墨很長很長溢出省略。

3.左側(cè)筆墨和2一樣，右側(cè)筆墨給他加了兩個right。

下面上樣式：

.footer {
  width: 300px;
  height: 20px;
  display: flex;
  overflow: hidden;
}
.left {
  background: #3cc8b4;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 50px;
}
.right {
  background: #9bc;
  max-width: 250px;
}
.right-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="footer">
   <div class="left">
     leftleftleftleftleftleftleftleftleftleftleftleftleft
  </div>
  <div class="right">
    <div class="right-ellipsis">
      rightrightrightrightrightrightrightrightright
    </div>
  </div>
</div>

代碼中多加了max-width、min-width和叫right-ellipsis的div。來達到如下結(jié)果：

大家根據(jù)必要可以實現(xiàn)不同需求的結(jié)果了。設(shè)計需求總結(jié)：左側(cè)寬度主動增加，右側(cè)寬度主動增加并且不可溢出省略。當(dāng)左側(cè)筆墨長度超出的時候，左側(cè)筆墨溢出省略。結(jié)果如下：

以上就是本文的悉數(shù)內(nèi)容，盼望對大家的學(xué)習(xí)有所幫助，也盼望大家多多支持圖趣網(wǎng)。