使用Flex布局能夠?qū)崿F(xiàn)很好的效果。

.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............