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 lin开发者_JS百科es.
=>
This is some long text and we need ...
The text must be displayed with a <p>
tag.
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
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.
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/
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>
精彩评论