6

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.

Tom
  • 8,509
  • 7
  • 49
  • 78

1 Answers1

3

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.

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • 1
    So, that doesn't seem completely accurate. I know that white-space:pre also works -- but it (predictably) prevents the text from wrapping naturally. That leads me to believe there's a more general "layout constraint" mechanic at work (similar to the many ways of triggering hasLayout). That said, I grant that the internet in general doesn't appear to have found any pure CSS solution (and the JS ones categorically suck). I'll post here if I find anything. – Tom May 11 '12 at 22:43
  • Still haven't found anything. Short of asking PPK himself, this may be the best the internet can do. – Tom May 22 '12 at 20:56