css3之弹性布局导致单行超出省略失效
2022-04-12 本文已影响0人
硅谷干货
前言
最近在用css盒子布局的时候，遇到一个文本适配问题，当文字过长需要结尾单行省略号显示的要求，但是因为父盒子设置了
display: flex;，导致了子标签单行文本省略号显示不起作用，以此笔记。
示例
<!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;*/
/*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; 即可，确实有效，不过经过大量测试，有些手机机型适配 min-width 有问题，建议设置成 width: 0; 更好一点。
点赞加关注，永远不迷路
