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.

Answer 2

You can do a slice and embed it along with the dots while rendering, and play around with the css width to make it two lined.

.js file

var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor"

.ejs file

<p>    <%= text.slice(0,30)+" ..." %>    </p>

Answer 3

text-overflow works on some browsers -> http://www.quirksmode.org/css/textoverflow.html

or

Excellent answer here -> Insert ellipsis (...) into HTML tag if content too wide

or

To just limit the showing of 2 lines -> jTruncate jQuery plugin works well

Answer 4

var string = "This is some long text and we need to show it on only two lines.".split(" ");
var first_line = string.slice(0,5).join(" ");
var second_line = string.slice(6,10).join(" ");

var display_string = first_line + "<br />" + second_line;
if(string.length > 10) display_string += "...";
$("#text").html(display_string);

There is definitely a much better way to do this, but this will at least get you started. It shows 5 words per line and adds and ellipsis if there are more than 10 words. Seek a better solution but you can use this until you find one. http://jsfiddle.net/hepW8/