當(dāng)前位置:圖趣網(wǎng)(Tuquu) > 網(wǎng)頁設(shè)計教程 > 移動前端 > flex布局實現(xiàn)左側(cè)筆墨溢出省略右側(cè)筆墨自適應(yīng)

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)。

[教程作者:佚名]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/wd500.html
css加載會造成壅塞嗎
CSS3之2D與3D變換的實現(xiàn)方法
圖趣網(wǎng)微信
建議反饋
×