title: text-overflow: ellipsis not working in a div containing a div in Chrome
body: <p>I want to have all text be ending with '...' but it only works for the inner div:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    border: solid 2px blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 40px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;Test test test test test test
    &lt;div&gt;asdasdasdasdasd&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/JU8Up/" rel="nofollow noreferrer">http://jsfiddle.net/JU8Up/</a></p>
  
  <p>is there any Solution so that also the text contained in the outer div gets the '...' ?</p>
  
  <p>edit: seems like its a chrome problem, but still the fix in the answer below works</p>