html - 隐藏整个元素的 CSS 溢出选项，而不是剪辑它

Question

这是我目前拥有的:

<ul>
    <li><a href="#"><i class="fa fa-home"></i>Home page</a></li>
    <li><a href="#" id="create-new-btn"><i class="fa fa-plus"></i>Create new...</a></li>
    <li><a href="#"><i class="fa fa-user"></i>My profile</a></li>
</ul>

对于容器:

#pando-header-c {
  position:absolute;
  left:100px;
  right:430px;
  height:50px;
  white-space: nowrap;
  overflow:hidden;
  display:block; 
}

但是，出于某种原因，它只渲染了部分元素，并没有在溢出时将它们完全切掉；尽管我已将它们全部设置为内联 block 和 block (a 以及 li)。

这是它剪辑的方式: http://i.stack.imgur.com/dNTJ2.png

问题是，如果整个元素不完全适合，我如何让整个元素不可见，包括剪掉文本。

Answer 1

溢出，顾名思义，就是不合适的东西。所以 hidden 的意思是“ overflow hidden ”，而不是元素。如果它不适合，我能想到的隐藏它的最好方法是使用媒体查询:

@media screen and (max-width: 600px) {
  #pando-header-c {
    display: none;
  }
}

您需要进行一些调整才能看到，但如果内容大于容器，我想不出一种 CSS 方法来隐藏它。