css：弹性布局导致单行超出省略失效

最新推荐文章于 2024-07-01 20:14:37 发布

weixin_34343000

最新推荐文章于 2024-07-01 20:14:37 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cbfd9e26fb9a03232197e89

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>弹性布局导致单行超出省略失效</title>
    <style>
    .text{
        display: flex;
    }
    .text-children{
        flex: 1;
        /*min-width: 0;*/
    }
    .text-grandson{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    </style>
</head>
<body>
<div class="text">
    <div class="text-children">
        <div class="text-grandson">
            我是弹性布局孙级元素，我超出父级宽度的部分会被隐藏且显示省略号；
            如果没有实现效果是因为父级元素被我撑开，给父级元素加上min-width: 0;样式就可以，这样它自身宽度将是从0开始变大，而不会直接被我不换行直接撑开
        </div>
    </div>
</div>
</body>
</html>
复制代码

解决方案：只要在设置了flex: 1的那个元素加上min-width: 0;