Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide one word at a time with overflow:hidden

Tags:

css

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)

like image 254
Vaughan Avatar asked Oct 28 '13 00:10

Vaughan


1 Answers

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/

like image 123
Wex Avatar answered Sep 30 '22 06:09

Wex