css3 flex布局，文字超出显示省略号

css3 flex布局，文字超出显示省略号

在那个文字的父元素加上min-width:0;

    <div class="box">
        <div class="flex1">
            <img />
        </div>
        <div class="flex2">
            <p>css3 flex布局，文字超出显示省略号css3 flex布局，文字超出显示省略号</p>
        </div>
    </div>

.box{
    display:flex;
}
.flex1{
    width:50px;
}
.flex2{
    flex:1.0;
    min-width:0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: normal;
}

来源：CSDN

作者：huangwenhui1234

链接：https://blog.csdn.net/qq_17134765/article/details/71699840