CSS overflow option to hide whole element, not clip it

Question

This is what I have at the moment:

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

And for the container:

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

However, for some reason it renders the elements partially and it doesn't fully cut them out in the overflow; despite the fact that I've set them all to inline-block and block (the a, as well as li).

This is how it clips it: http://i.stack.imgur.com/dNTJ2.png

The question is how do I make the whole element invisible if it doesn't fit entirely, instide of clipping the text out.

Answer 1

Overflow is, by definition, the things that don't fit. So hidden means "hide the overflow", not the element. The best way I can think of to hide it if it doesn't fit is to use media queries:

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

It takes some tweaking on your end to see, but there's not a CSS way I can think of to hide it if the content is larger than the container.