title: whitespace:nowrap - how can I truncate the overflowed text - rather than have it expand the element?
body: <p><a href="https://plnkr.co/edit/mVC8AAeBfFeBYCyx1mQx?p=preview" rel="nofollow">This plunker</a> demonstrates what I'm trying and failing to do. </p>
  
  <p>I have some simple HTML: </p>
  
  <pre><code>  &lt;div class =  "fixed-width-div"&gt; 
      &lt;label&gt; hello world &lt;/label&gt;
    &lt;/div&gt;
  
    &lt;div class ="fixed-width-div"&gt;        
      &lt;label&gt; adfkldjs sdklfjsdlkfjsdklfkj sdkfjsdlfjlsdkfj lsjdfklsdfjlsdjf lsdjfksdlfjskdf &lt;/label&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I don't want the long labels wrapping, nor do I want them overflowing or expanding the parent element. </p>
  
  <pre><code>label {
    background-color: #ddd;
    white-space: nowrap;
    text-overflow: ellipsis;
  
  }
  
  .fixed-width-div {
    width: 100px;
    background-color: cyan;
    padding: 5px;
    margin-top: 15px;   
  }
  </code></pre>
  
  <p>How can I acheive this? </p>
  
  <p>I suspect it's actually a difficult problem - as that text <em>is</em> in the DOM and has to go somewhere right? </p>