views:

56

answers:

1

Is it possible to limit a text length to "n" lines using CSS (or cut it when overflows vertically).

text-overflow: ellipsis; only works for 1 line text.

original text:

Ultrices natoque mus mattis, aliquam, cras in pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum nunc
nunc rhoncus placerat urna! Sit est sed! Ut penatibus turpis
mus tincidunt! Dapibus sed aenean, magna sagittis, lorem velit

wanted output (2 lines):

Ultrices natoque mus mattis, aliquam, cras in pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum...

+3  A: 

As far as I can see, this would be possible only using height: (some em value); overflow: hidden and even then it wouldn't have the fancy ... at the end.

If that is not an option, I think it's impossible without some server side pre-processing (difficult because text flow is impossible to predict reliably) or jQuery (possible but probably complicated).

Pekka
This seems to work for any font-size .mytext { overflow:hidden; line-height: 1.2em; max-height: 2.4em;}
Pedro Ladaria
It's not exactly what I wanted but It seems to be the best solution :/
Pedro Ladaria
@Pedro yeah. You might be able to run through each `.mytext` using jQuery, find out whether it has more content than is visible, and add a `...` manually. That way, you are compatible to clients with no JS, and clients with JS can have the decoration. Maybe worth a separate question for a jQuery Guru to answer; *might* be possible to do relatively easily
Pekka