详解flex实现左右布局中按钮溢出隐藏效果最近在开发公司项⽬的时候UI设计稿给了这么⼀个设计(这⾥是我⼿动画的草图)：
看这效果，第⼀感觉很简单，flex布局，左边宽度⾃适应，右边固定宽度。
先回顾下关于⽂本溢出隐藏的⽅式：
/* 单⾏⽂本 */
.text {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
/*当然还需要加宽度width属来兼容部分浏览。*/
}
/* 多⾏⽂本 */
.text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
/* -webkit-line-clamp 显⽰⾏数 */
}
然后开开⼼⼼的开始写啊写，代码如下：
HTML代码
<div id="flex">
<div id="left">
<span>这是⼀个按钮</span>
</div>
<div id="right">
<span>9.9元</span>
</div>
</div>
CSS样式
#flex {
display: flex;
}
#left {
flex: 1;
}
#left{
background: red;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#left span{
background-color: yellow;
border-radius: 30px;
border: 1px solid blue;
display: inline-block;
}
#right {
background: green;
width: 200px;
margin-left: 10px;
}
这效果。。有点⽆语。。右边的圆⾓去哪⾥了呢，并且在控制台查看元素，会看到实际span元素的宽度⾮常的宽，且超过⽗容器#left，⽽#left实实在在的还是正常的宽度。思考了⼀会，脑⼦了出现了各种元素的层叠关系，于是给实际⽂本内容外⾯，再添加⼀层div，来控制内容的宽度。
HTML代码
<div id="flex">
<div id="left">
<div class="box">
<span>我在左边，⾃适应布局</span>
</div>
</div>
<div id="right">我在右边，定宽</div>
</div>
CSS样式
#flex {
display: flex;
}
#left {
flex: 1;
background: red;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/* 新增的内容的⽗容器 */
#left .box{
background: red;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
css布局左边固定右边自适应
border: 1px solid blue;
border-radius: 100px;
display: inline-block;
}
#left span{
background-color: yellow;
border-radius: 30px;
}
#right {
background: green;
width: 200px;
margin-left: 10px;
}
⽽这⾥只需把原本设置在span上的宽度，边框，圆⾓和背景⾊样式，写到⽗容器.box上就可以，span⾥⾯只负责存放⽂本内容。
然后就⼤功告成了。以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。