flex布局实现左侧笔墨溢出省略右侧笔墨自适应
2019/4/14 21:26:35来源：不详
想要实现一个左侧笔墨可以根据笔墨长短主动调整宽度，当一行表现不下时，不挤压右侧笔墨空间，左侧笔墨溢出省略。同理当右侧笔墨变长的时候，右侧笔墨全表现，左侧笔墨被挤压后溢出省略的结果。我说的可能不是很清楚，让我们看看结果图吧。
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。来达到如下结果：
大家根据必要可以实现不同需求的结果了。设计需求总结：左侧宽度主动增加，右侧宽度主动增加并且不可溢出省略。当左侧笔墨长度超出的时候，左侧笔墨溢出省略。结果如下：
以上就是本文的悉数内容，盼望对大家的学习有所帮助，也盼望大家多多支持图趣网。
免责声明：本站文章系图趣网整理发布，如需转载，请注明出处，素材资料仅供个人学习与参考，请勿用于商业用途！
本文地址：http://www.tuquu.com/tutorial/wd500.html
本文地址：http://www.tuquu.com/tutorial/wd500.html
上一篇:css加载会造成壅塞吗
这些是最新的
最热门的教程
