text-overflow: ellipsis not working in a div containing a div in Chrome

Question

I want to have all text be ending with '...' but it only works for the inner div:

div {
  border: solid 2px blue;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 40px;
}

<div>Test test test test test test
  <div>asdasdasdasdasd</div>
</div>

http://jsfiddle.net/JU8Up/

is there any Solution so that also the text contained in the outer div gets the '...' ?

edit: seems like its a chrome problem, but still the fix in the answer below works

Answer 1

It works by adding float: left; to the div CSS, but without any further context I can't comment on what side-effects that may have in your implementation.

Example here.