Show only first two rows from a paragraph

Question

I need to display some text on two lines, and add some \"...\" if the text is too long.

Example :

This is some long text and we need to show it on only two         


        

Answer 1

CSS3 solution = no Javascript solution

CSS3 supports (IE supported it even earlier - one of the rare things that others should support as well) text-overflow: ellipsis; style setting that automatically adds ellipsis to overflown text. Browser support can be seen on this page.

CSS2.1 = no Javascript solution

This JSFiddle is a CSS-only workaround-wanna-be, that's probably not exactly what you're after but can easily be enhanced further. It simply adds ellipsis at the end of every paragraph.

CSS2.1 = just a little bit of Javascript solution

Upper example could as well be enhanced so the CSS class with :after would be added only to those paragraphs whose content exceeds element dimensions. This could be quite easily done using a small bit of Javascript. The problem is that ellipsis would always be positioned flush right. If that's not a problem, then this is a very good way to go.

No CSS = full blown Javascript solution

There's also a Javascript way of doing this and is described rather well on this Stackoverflow answer. It describes the algorithm to make a line full of text but a similar thing can be achieved in your case to fill two lines and when exceeded, add an ellipsis.

My suggestion - outcome

Since Firefox is the only browser that didn't support text-overflow until version 7 (in other words: until recently), I suggest you just go with the CSS3 solution.

Why? Firefox browser gets automatically updated (by default) so it's highly likely that only a small fraction of your users wouldn't see ellipsis. And also just until their browser gets upgraded. If they explicitly disabled automatic browser updates they probably do this manually and will get it sooner or later as well.