template
<div class="div-flex">
<div class="left">
{{ info.left }}
</div>
<div class="right">
{{ info.right }}
</div>
</div>
style
.div-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.left{
flex: 1; //重点
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.right{
padding-left: 40px; //距离左侧的宽度,更美观
}
总结
重点在于flex,flex:1会自动放大缩小