详解flex实现左右布局中按钮溢出隐藏效果

/* 单行文本 */
.text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    /*当然还需要加宽度width属来兼容部分浏览。*/
}

/* 多行文本 */
.text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    /* -webkit-line-clamp 显示行数 */
}

<div id="flex">
    <div id="left">
        <span>这是一个按钮</span>
    </div>
    <div id="right">
        <span>9.9元</span>
    </div>
</div>

#flex {
    display: flex;
}

#left {
    flex: 1;
}
#left{
    background: red;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
#left span{
    background-color: yellow;
    border-radius: 30px;
    border: 1px solid blue;
    display: inline-block;
}

#right {
    background: green;
    width: 200px;
    margin-left: 10px;
}

<div id="flex">
    <div id="left">
        <div class="box">
            <span>我在左边，自适应布局</span>
        </div>
    </div>
    <div id="right">我在右边，定宽</div>
</div>

#flex {
    display: flex;
}

#left {
    flex: 1;
    background: red;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/* 新增的内容的父容器 */
#left .box{
    background: red;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    border: 1px solid blue;
    border-radius: 100px;
    display: inline-block;
}
#left span{
    background-color: yellow;
    border-radius: 30px;
}

#right {
    background: green;
    width: 200px;
    margin-left: 10px;
}