title: CSS: remove entire element when clipped
body: <p>I have a list of items in an unordered list inside a div with overflow hidden. The items in the list are represented by boxes with text content and a border round them. It can be a long list of useful, but not essential information, that can be hidden if used on a smaller device.</p>
  
  <p>If some items in the list overflow I would like to set the entire item that overflows as hidden, not just part of it.</p>
  
  <p>currently the list can look like this when clipped:</p>
  
  <pre><code>---------
  |   A   |
  |       |
  ---------
  
  ---------
  |   B   |
  </code></pre>
  
  <p>Since B overflows only half of it is displayed. I would like only A to be displayed if this occurs.</p>
  
  <p>The items do not have to be in an unordered list, can be in whatever. Is it any way to do this with only html and css?</p>
  
  <p>I am able to do it in jQuery, but I just wonder if there is a css way to do it.</p>