.box {display:flex width:200px border:1px solid #888}
.left {flex:1 1 auto background:#88f white-space:nowrap overflow:hidden}
.right {flex:1 1 auto text-align:right background:#f88 white-space:nowrap text-overflow:ellipsis overflow:hidden}
</style>
左边多右边少,总体没有超出范围:
<div class="box">
<span class="left">左左左左左左左</span>
<span class="right">右右右</span>
</div>
左边少右边多,总体没有超出范围:
<div class="box">
<span class="left">左左左左</span>
<span class="right">右右右右右右</span>
</div>
左边和右边加起来超出范围:
<div class="box">
<span class="left">左左左左左左左左左</span>
<span class="right">右右右右右右右</span>
</div>