Geek asks and answers

Text-overflow: ellipsis doesn't work in div containing div in Chrome

I want all the text to end with "...", but it only works for the inner div:

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

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

http://jsfiddle.net/JU8Up/

is there any solution so that the text contained in the outer div gets "..."?

edit: this seems to be a chrome issue, but still the fix in the answer below works

+5
source share
2 answers

It works by adding float: left;CSS to the div, but without any additional context, I cannot comment on what side effects may have in your implementation.

An example is here .

+4
source

More articles:


All Articles