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

css

Solution

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.

Problem

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.

Original source

Related problems