如何隐藏div中只有部分可见的标记？

Question

我想隐藏一个元素，当子宽度超出这些父级时。如下面的链接。

父母的宽度是固定的，它的孩子有一行。

当我使用overflow:hidden时，由于孩子的宽度扩展父宽度，第四个孩子在div上显示半宽，另一个部分被隐藏。所以，我想隐藏第四个标签。

注意：

1. 每个孩子的宽度都没有固定。

2. 父母的宽度是固定的。

3. 每个孩子必须是一行，不能换行。

.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>

JS Bin.

Answer 1

您可以强制显示父div的高度，然后移除white-space: nowrap，这样无法完全显示的a标记将转到下一行，并将被隐藏overflow: none;

＆＃13;

＆＃13;

.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;

＆＃13;

＆＃13;