flex自适应超出省略

Posted 2020-12-02 lw5116

父容器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;
        }
    }
}

如图