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 is an example: http://jsfiddle.net/z56vn/
I need to only show the first few lines of each document. We've determined that 300px is about right. If I simply set a max-height
of 300px to the divs, then depending on text properties (size, padding, margin) the bottom of last line gets clipped.
How can I set a max-height
for each block that will be close to 300px but that will not cause clipping?
The solution can use CSS, Javascript and jQuery.
Those two questions are similar but their solutions assume a constant line height.
You can force the content of the HTML <div> element stay on the same line by using a little CSS. Use the overflow property, as well as the white-space property set to “nowrap”.
The vertical position of the element to be stuck can also be modified with the help of the 'top' property. It can be given a value of '0px' to make the element leave no space from the top of the viewport, or increased further to leave space from the top of the viewport.
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/
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.
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});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With