textwrap with ellipsis and nowrap white-space

Question

I would like to cut off some long text using an ellipsis.

However, with my current implementation, it doesn't include extra words that would cause it to go beyond the div and does not show ellipsis to indicate that the text is cut off.

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 the 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>