flex自适应超出省略

父容器flex布局,左右结构的某个子div的宽度为flex:1自适应,内容超出隐藏,需将其宽度设为0,再使用超出隐藏属性

例如:

.detail {
    display: flex;
    align-items: flex-end;
    .record {
        flex: 1;
        width: 0;
        >p {
            margin: 10px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

如图

 

posted @ 2018-07-05 19:51  wayne529  阅读(817)  评论(0编辑  收藏  举报