我想隐藏一个元素,当子宽度超出这些父级时。如下面的链接。
父母的宽度是固定的,它的孩子有一行。
当我使用overflow:hidden
时,由于孩子的宽度扩展父宽度,第四个孩子在div上显示半宽,另一个部分被隐藏。所以,我想隐藏第四个标签。
注意:
每个孩子的宽度都没有固定。
父母的宽度是固定的。
每个孩子必须是一行,不能换行。
.div{
width: 180px;
white-space: nowrap;
overflow: hidden;
}
a {
display: inline-block;
border: 1px solid #69a;
padding: 10px;
}
<div class="div">
<a href="">test</a>
<a href="">test</a><a href="">test</a>
<a href="">test</a><a href="">test</a><a href="">test</a>
<a href="">test</a><a href="">test</a><a href="">test</a>
</div>
答案 0 :(得分:2)
您可以强制显示父div的高度,然后移除white-space: nowrap
,这样无法完全显示的a
标记将转到下一行,并将被隐藏overflow: none;
.div{
width: 180px;
overflow: hidden;
height: 40px;
background: lightgrey;
}
a {
display: inline-block;
border: 1px solid #69a;
padding: 10px;
}
&#13;
<div class="div">
<a href="">test</a>
<a href="">test</a><a href="">test</a>
<a href="">test</a><a href="">test</a><a href="">test</a>
<a href="">test</a><a href="">test</a><a href="">test</a>
</div>
<br />
<div class="div">
<a href="">test test</a>
<a href="">test test</a><a href="">test</a>
<a href="">test</a><a href="">test</a><a href="">test</a>
<a href="">test</a><a href="">test</a><a href="">test</a>
</div>
<br />
<div class="div">
<a href="">te</a>
<a href="">st</a><a href="">te</a>
<a href="">st</a><a href="">te</a><a href="">test</a>
<a href="">test</a><a href="">test</a><a href="">test</a>
</div>
&#13;