title: How to hide child element entirely if it is cut off by it's parent's overflow:hidden property?
body: <p>I have a <code>div</code> element with child nodes.  This <code>div</code> is set up to hide any overflow.  However, I've noticed that if a child element overflows this parent <code>div</code> then it is cut off.  What I would prefer would be for this specific child element to be hidden completely if it overflows its parent.</p>
  
  <p>Here's some example HTML:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;style&gt;
          #tags {
              width: 120px;
              overflow:hidden;
              white-space:nowrap;
          }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="tags"&gt;
              &lt;span class="tag"&gt;&lt;a href="#tag1"&gt;tag 1&lt;/a&gt;&lt;/span&gt;
              &lt;span class="tag"&gt;&lt;a href="#tag2"&gt;tag 2&lt;/a&gt;&lt;/span&gt;
              &lt;span class="tag"&gt;&lt;a href="#tag3"&gt;tag 3&lt;/a&gt;&lt;/span&gt;
              &lt;span class="tag"&gt;&lt;a href="#tag4"&gt;tag 4&lt;/a&gt;&lt;/span&gt;
              &lt;span class="tag"&gt;&lt;a href="#tag5"&gt;tag 5&lt;/a&gt;&lt;/span&gt;
              &lt;span class="tag"&gt;&lt;a href="#tag6"&gt;tag 6&lt;/a&gt;&lt;/span&gt;
              &lt;span class="tag"&gt;&lt;a href="#tag7"&gt;tag 7&lt;/a&gt;&lt;/span&gt;
              &lt;span class="tag"&gt;&lt;a href="#tag8"&gt;tag 8&lt;/a&gt;&lt;/span&gt;
              &lt;span class="tag"&gt;&lt;a href="#tag9"&gt;tag 9&lt;/a&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Rendering this code in a browser shows the first three tags, but the fourth is cut in half.  How can I structure my CSS so that this fourth item would be hidden completely instead?</p>