How to display only the first few lines of a div (clamping)?

Question

I have a list of divs in which I display the preview of longer documents. The documents use varying font styles. So I don\'t have a constant line height. Here i

Answer 1

One alternative is to use the dotdotdot jQuery plugin.

Its used like

$("div.text_element").dotdotdot({
  ellipsis : "...",
  wrap : "word"
});

This way, you can just concern yourself with the div dimensions rather than line height or other CSS attributes. Also, it allows you to trigger events to show and hide the hidden text.

Answer 2

The algorithm to calculate all the factors perfectly using only javascript would be too complex.

With css3 there is line-clamp

But this works only on modern browsers.

p{
 margin:20px;
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
}

DEMO

http://jsfiddle.net/MM29r/

this allows you to set the number of lines you want to display before adding the 3 dots.

now you want 300px... so:

var p=document.getElementsByTagName('p')[0],
lineheight=parseInt(window.getComputedStyle(p).getPropertyValue("line-height"));
var lines=Math.floor(300/lineheight);
p.style['-webkit-line-clamp']=lines;

so this gives you an element that is 300px or less

DEMOS

http://jsfiddle.net/MM29r/1/

http://jsfiddle.net/MM29r/2/

NEEDED VALUES: line-height

Now if you want to make the box exactly 300px height just add margins or paddings to the paragraphs.But that depends on your preferences.

if you have some questions just ask.

Note

every js function that adds 3 dots at the end by calculating the words would be to resources intensive to apply in a real world website.

a better approach would be to calculate every paragraph one time and add the clamped result to a db or store it in the static website.

but then again every browser displays fonts in a different way.

EDIT

Here is a different way to display partial content. Using max-height & -webkit-column-count

https://stackoverflow.com/a/20691677/2450730

DEMO

http://jsfiddle.net/HNF3d/10/

the support is slightly higher than line-clamp and you are abe to display the whole content.

EDIT2

Fading image at the bottom.

p{
 width:300px;
 max-height:300px;
 overflow:hidden;
}
p:before{
 content:"";
 display:block;
 position:absolute;
 margin-top:240px;
 background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
 height:60px;
 width:300px;
}

http://jsfiddle.net/MM29r/9/

EDIT3

fading image old browsers (use real images links, not base64)

http://jsfiddle.net/MM29r/13/

Answer 3

You could definitely use Clamp.js, which is a JavaScript plugin created by Joseph Schmitt. The minified version of the code can be found here.

You could then use it like this:

var elem = document.getElementsByTagName("div");

for(var z=0;z < elem.length; z++){
  $clams(elem[z], {clamp: '300px'});
}

Alternatively, you could use getElementsByClassName if not all your <div>s needed clamping.

Answer 4

You should look for line clamping techniques

A list of them can be found here http://css-tricks.com/line-clampin/

As you can see the above link explains various methods to achieve line clamping, but only one of them is truly a cross browser solution. There seems to be a javascript library that solves this problem exactly, and it works even if you use various font sizes or styles

Clamp.js [ https://github.com/josephschmitt/Clamp.js ]

Here is an example

var paragraph = document.getElementById("myParagraphId");

$clamp(paragraph, {clamp: 3});

Answer 5

Here what I would do in this case;

First we have to get the div and find out the line-height so I am assuming you got your div as jQuery object.

var $divToClamp = $("#");
var $cloneDiv = $divToClamp.clone();
$divToClamp.insertAfter($cloneDiv.html("A"));
// created a new div as same place with the div to get same css, from parents, class etc.
// i don t know how jQuery handles the ids you must check that
var lineHeightToClamp = $cloneDiv.height() * 3;
$cloneDiv.remove();
// remove the clone we are done with it this does not work create clone div as fixed position back of the actual div and visibility hidden (not display:none)
//now we now the line-height for 3 lines set the css
$divToClamp.css({
      overflow : "hidden",
      lineHeight: lineHeightToClamp
    });

some thing similar to this should fix you case but there might be some exceptions like margin of the div i am not sure $cloneDiv.height() includes them or not.

also if there is another element (like span) in your div with different css that will also change the situation.

Hope this helps.