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;
         


        

Answer 1

There's a jQuery plugin that does this, called dotdotdot.

It also works for multi-line text, and adapts responsively if the text reflows e.g. if the screen size changes. It also includes smart truncation of pathnames e.g. http://example.com/some/long/.../path.html

---

Be aware of the possibility of width-based timing issues in cases where the width changes or becomes unavailable in ways the plugin might not expect, such as if the text is initially hidden or if it changes font (e.g. loading web fonts on some browsers). Might require re-applying or being applied after such changes.

But 99% of the time, the plugin seems fast and robust.