Textwrap with ellipsis and nowrap white-space

Question

I would like to cut long text using ellipsis .

However, with my current implementation, it does not include extra words that call it outside the div and do not show ellipsis to indicate that the text is disabled.

What am I doing wrong?

http://jsfiddle.net/sw6Sp/6/

 <div class="testWrap">This is some very long text that I want to cut off </div> .testWrap{ max-width: 125px; height:15px; overflow: hidden; text-overflow:ellipsis; border: 1px solid black; } 

Answer 1

Just use text-overflow: ellipsis along with white-space: nowrap .

Updated example

 .testWrap { width: 125px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

Answer 2

Adding CSS rule white-space: nowrap; should solve your problem.

 <div class="testWrap" style=" max-width: 125px; height:15px; overflow: hidden; text-overflow:ellipsis; border: 1px solid black; white-space: nowrap; ">This is some very long text that I want to cut off </div>