flex省略号失效_响应式超出省略_css超出省略
2024-11-21 15:15:36
现有超出省略只能解决固定宽度的盒子，下文为你讲述如何利用flex做出响应式布局
5744

举个例子

//html
<div class="flex">
        <div class="label">label</div>
        <div class="content">
            <div class="value">111112212212112111112212212112111112212212112111112212212112111112212212112111112212212112111112212212112111112212212112111112212212112111112212212112</div>
        </div>
//css
 .flex{
        display: flex;
    }
    .value{
        overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    }

这样无法超出省略，

但是可以在content加入overflow: hidden;或者min-width: 0;

 .content{
        overflow: hidden;
        min-width: 0;
    }

就可以使.value超出后省略

最新文章