Hide one word at a time with overflow: hidden

Question

Is there a way to use CSS to hide a word at a time (instead of a letter at a time) when an element is not wide enough to show its text content?

For example, with the following code, when the browser window becomes narrow to show the whole sentence, I want it to show Lorem ipsum dolor sit... instead of Lorem ipsum dolor sit ame...

HTML:

 <div>Lorem ipsum dolor sit amet</div> 

CSS

 div { overflow:hidden; text-overflow:ellipsis; white-space-nowrap; } 

(I do not need to support older browsers)

Answer 1

You can always just make your container have the same height as one line of text, and just hide all text wraps under that line using overflow: hidden .

http://jsfiddle.net/Wexcode/fbhxL/

 p.short { height: 18px; overflow: hidden; } p.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }