text overflow ellipsis: avoid word break

css

Solution

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.

Problem

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..."

Original source

Related problems