<div style="width:100px;">
<div class="box">
<div class="status"></div>
<div class="text">天津饭饭天津饭饭</div>
<button class="btn">测试</button>
</div>
</div>
.box{
display: flex;
align-items: center;
}
.status{
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 5px;
background-color: rgb(209, 48, 15);
}
.text{
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
}
.btn{
transform: scale(.6);
}
demo: https://jsfiddle.net/uxc68jop/
同样的代码在demo中没有问题,在项目中第一个元素width就失效了?
https://jsfiddle.net/lilnong1/186crkvo/2/ 极端情况下就是会变形。如果不想变形可以
flex: none
加了
flex: none
之后就不会自动缩放了