flex 中的 ellipsis

背景

平常在写页面的时候，经常会遇到如下的布局，这个时候，我们第一反应就是flex布局，超出点点点的实现需要用到 flex: 1 + ellipsis

code

利用min-width: 0 来解决这个问题

<div
    v-for="(item, index) in product"
    :key="index"
    class="purchase-product"
>
    <div class="pro-left">
        <div class="image">
            <img
                src="//placehold.it/19x19"
                alt=""
            />
        </div>
        <div class="mall">
            <p>拼多多拼多多拼多多拼多多拼多多</p>
        </div>
    </div>
    <div class="pro-right">
        <span class="price">¥1499</span>
        <i class="icon-chevron-right-o"></i>
    </div>
</div>

min-width: 0;

.pro-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    
    .mall {
        font-size: 14px;
        font-weight: bolder;
        line-height: 1.21;
        flex: 1;
        min-width: 0;
        p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

参考资料

stackoverflow.com/questions/2…