Hide one word at a time with overflow:hidden

Question

Is there a way to use CSS hide a word at a time (instead of a letter at a time) when an element isn't wide enough to show it's text content?

For example, with the following code, when the browser window gets to narrow to show the entire 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 don't need to support old browsers)

Answer 1

You could always just force your container to have the same height as a single line of text, and just hide whatever text wraps beneath that line using overflow: hidden.

/* hide one word at a time */

p.short {
    height: 18px;
    overflow: hidden; }

/* display an ellipsis "..." */

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

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