图示:
html:
<div class="cehsi">
<div class="left">左侧</div>
<div class="right">fasdfasgdsdgfasdfasdfasdfasdfasdfasdfasdfsdfadsfsadfsa</div>
</div>
css:
.cehsi {
width: 200px;
height: 40px;
border: 1px solid #f00;
display: flex;
align-items: center;
.left {
width: 40px;
margin-right: 10px;
background: #ccc;
flex-shrink: 0;
}
.right {
flex: 1;
// flex布局,文字超出显示省略号
width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
width: 0;
不能少