CSS3中使用弹性布局,超出隐藏
1.在平时的书写样式时,我们都是用css来写样式,在css样式中超出部分,我们可以使用overflow: hidden;
即可隐藏,但是当使用弹性性布局时,超出隐藏overflow: hidden;
就不起作用。
2.解决方法:要在设置了flex: 1的那个元素加上min-width: 0;
案例代码:
<!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>