css - text overflow ellipsis: avoid word break

Question

In my webpage I have a div with fixed width and using the following css:

width: 200px; 
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

The ellipsis is working, the problem is that it cuts the final word, and I wanted it to put the ellipsis (...) in the final of a full word.

For instance, if I have the text: "stackoverflow is the best", and if it need to be cutted near the end, I want it to display "stackoverflow is the ..." instead of "stackoverflow is the be..."

Answer 1

I’m afraid it’s impossible. There was once text-overflow: ellipsis-word, which would do just this, but it was not implemented in browsers and it was removed from CSS3 drafts.