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

时间:2016-09-09 08:33:51

标签: html css

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

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

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

注意:

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

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

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

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

1 个答案:

答案 0 :(得分:2)

您可以强制显示父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;