文字一行显示太长显示省略号(不需要指定width)

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