For my website, I am attempting to add an ellipsis to multiline paragraphs that exceed a certain height. I have incorporated the dotdotdot jquery plugin from here.
An odd issue arises when the page is refreshed, as the ellipsis does not appear until I resize the window. Despite rearranging the script placement in my html file so that dotdotdot loads last, the problem persists. Any insights on why this might be happening?
The settings utilized for dotdotdot are as follows:
$(document).ready(function() {
$("p.article-content").dotdotdot(
{
/* The HTML to add as ellipsis. */
ellipsis : '...',
/* How to cut off the text/html: 'word'/'letter'/'children' */
wrap : 'word',
/* jQuery-selector for the element to keep and put after the ellipsis. */
after : null,
/* Whether to update the ellipsis: true/'window' */
watch : true,
/* Optionally set a max-height, if null, the height will be measured. */
height : null,
/* Deviation for the height-option. */
tolerance : 0,
/* Callback function that is fired after the ellipsis is added,
receives two parameters: isTruncated(boolean), orgContent(string). */
callback : function( isTruncated, orgContent ) {},
lastCharacter : {
/* Remove these characters from the end of the truncated text. */
remove : [ ' ', ',', ';', '.', '!', '?' ],
/* Don't add an ellipsis if this array contains
the last character of the truncated text. */
noEllipsis : []
}
});
});
The displayed HTML structure (experimental layout):
<article class="article">
<div class="article-image"></div>
<h2>Title</h2>
<p class="date">December 19, 2012</p>
<p class="article-content">Lorem ipsum etc. (the actual content is larger)</p>
</article>
Here's the accompanying CSS:
article {
font-size: 99%;
width: 28%;
line-height: 1.5;
float: left;
margin-left: 8%;
margin-bottom: 3em;
text-align: justify;
}
article h2 {
font-size: 125%;
line-height: 0.5;
text-transform: uppercase;
font-weight: normal;
text-align: left;
color: rgba(0,0,0,0.65);
}
.date {
margin-top: 0.3em;
margin-bottom: 1em;
font-family: 'PT Sans';
color: rgba(0,0,0,0.5);
}
.article-image {
background-image: url(http://lorempixel.com/g/400/300/city/7);
width: 100%;
height: 13em;
overflow: hidden;
margin-bottom: 1.5em;
}
p.article-content {
font-family : 'PT Sans';
color : rgba(0,0,0,0.65);
margin-bottom : 0;
height : 7em;
overflow : hidden;
}