flex布局實現(xiàn)左側筆墨溢出省略右側筆墨自適應
2019/4/14 21:26:35來源：不詳
想要實現(xiàn)一個左側筆墨可以根據(jù)筆墨長短主動調整寬度，當一行表現(xiàn)不下時，不擠壓右側筆墨空間，左側筆墨溢出省略。同理當右側筆墨變長的時候，右側筆墨全表現(xiàn)，左側筆墨被擠壓后溢出省略的結果。我說的可能不是很清楚，讓我們看看結果圖吧。
1.右側筆墨是多少就是多寬，左側默認占有剩余的所有空間。
2.右側筆墨是多少就是多寬，和1一樣。左側筆墨很長很長溢出省略。
3.左側筆墨和2一樣，右側筆墨給他加了兩個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。來達到如下結果：
大家根據(jù)必要可以實現(xiàn)不同需求的結果了。設計需求總結：左側寬度主動增加，右側寬度主動增加并且不可溢出省略。當左側筆墨長度超出的時候，左側筆墨溢出省略。結果如下：
以上就是本文的悉數(shù)內容，盼望對大家的學習有所幫助，也盼望大家多多支持圖趣網(wǎng)。
[教程作者：佚名]
免責聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉載，請注明出處，素材資料僅供個人學習與參考，請勿用于商業(yè)用途！
本文地址：http://irelandcustomcontracting.com/tutorial/wd500.html
本文地址：http://irelandcustomcontracting.com/tutorial/wd500.html
上一篇:css加載會造成壅塞嗎
這些是最新的
最熱門的教程
