使用Flex布局能够实现很好的效果。
.text{
width: 100%;
display: flex;
justify-content: space-between;
&>span:nth-child(1){
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
&>span:nth-child(2){
white-space: nowrap;
}
}
<div class='text'>
<span>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈和</span>
<span>嘻嘻</span>
</div>
效果如下图：
image.png
额，不要在意border............
