textwrap with ellipsis and nowrap white-space

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?


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


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

Updated Example

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