首页 > 其他好文 > 详细

flex自适应超出省略

时间：2018-07-05 21:30:32 阅读：138 评论：0 收藏：0 [点我收藏+]

标签：flow spl col com code wrap 容器 items hit

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