Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Alternatives to white-space:nowrap when using text-overflow:ellipsis

Tags:

css

On his demo page, PPK says that text-overflow:ellipsis requires (among other things) that "the box has white-space: nowrap or a similar method of constraining the way the text is layed out."

Does anyone have any idea what other types of "constraints" he's referring to? I've tried all the other options for white-space, but none of them give me what I want. I don't believe that all he meant by the phrase "similar method of constraining" was simply "any other white-space setting," but I haven't been able to think of any other text-layout constraints.

I ask because I'd like to display up to two lines of text before visually truncating the text (which I accomplish using height:2.5em), and white-space:nowrap prevents the text from wrapping to fill the space I've allocated.

like image 248
Tom Avatar asked May 11 '12 22:05

Tom


1 Answers

You need white-space: nowrap if you want to use text-overflow: ellipsis in a useful way.

I don't know what "similar method of constraining the way the text is layed out" he could have been thinking of.

I ask because I'd like to display up to two lines of text before visually truncating the text

I don't think CSS can do it. Here's an answer where I say the same thing, and 10 months later with 612 views, nobody has disagreed.

like image 130
thirtydot Avatar answered Sep 27 '22 15:09

thirtydot