jQuery dotdotdot example
HTML
<div class="right-side-article-container">
<div class="featured-title-container ">This is the title e</div>
<div class="featured-excerpt-container dot-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae est tellus. Sed posuere euismod ipsum, vitae posuere neque tempor et. Vivamus ut dui sit amet risus auctor pellentesque pulvinar et nisi. Nulla facilisi. Curabitur ac massa dolor. Donec aliquam ultrices enim, at sollicitudin magna molestie sit amet. Mauris tempor massa metus, ut venenatis felis dignissim ut. Praesent ultrices bibendum cursus. Sed ultricies justo ac euismod venenatis. Nam posuere mi et diam tincidunt, venenatis varius quam placerat. Sed sit amet dapibus nisi. Aliquam nunc mi, ultricies a semper id, consectetur a elit. Suspendisse consequat varius varius. Donec consequat ex a erat condimentum iaculis. Praesent suscipit rutrum ante in elementum.
Integer pharetra sed lacus id congue. Nullam sed nisi erat. Vestibulum eu magna bibendum, imperdiet purus nec, pretium urna. Curabitur turpis massa, posuere ut nulla quis, scelerisque vulputate elit. Nunc vel metus in libero pellentesque eleifend. Vivamus maximus cursus magna, eget posuere justo iaculis in. Etiam egestas ac ante sed porttitor. Praesent tincidunt nisl id orci pulvinar, eu mattis leo consectetur. Donec rutrum turpis vitae urna tempor sodales.
In imperdiet leo nunc, eu auctor nisi porttitor mollis. Ut aliquam mauris velit. Donec condimentum sed erat a varius. Cras laoreet posuere viverra. Cras massa purus, congue vitae sagittis et, tempus at enim. Nulla erat ex, vestibulum nec hendrerit a, aliquam vitae nulla. Praesent consequat porta augue, non luctus diam sodales vitae. Fusce eget tempor leo. Suspendisse consequat mollis mollis. Aliquam erat volutpat. Proin sit amet justo eu tortor rutrum elementum. In a faucibus sapien, quis congue quam. Nam luctus nunc in mi elementum suscipit. Fusce mattis ornare magna, nec tempus neque ornare vel. Proin ullamcorper, tellus...
CSS
.right-side-article-container {
position:absolute;
background-color:red;
height: 100px;
width: auto;
}
.featured-excerpt-container {
height:100%;
background-color:green;
}
.meta {
background-color:blue;
position: relative;
bottom:0;
right:0;
}
JavaScript
/*
* jQuery dotdotdot 1.8.1
*
* Copyright (c) Fred Heusschen
* www.frebsite.nl
*
* Plugin website:
* dotdotdot.frebsite.nl
*
* Licensed under the MIT license.
* http://en.wikipedia.org/wiki/MIT_License
*/
(function( $, undef )
{
if ( $.fn.dotdotdot )
{
return;
}
$.fn.dotdotdot = function( o )
{
if ( this.length == 0 )
{
$.fn.dotdotdot.debug( 'No element found for "' + this.selector + '".' );
return this;
}
if ( this.length > 1 )
{
return this.each(
function()
{
$(this).dotdotdot( o );
}
);
}
var $dot = this;
var orgContent = $dot.contents();
if ( $dot.data( 'dotdotdot' ) )
{
$dot.trigger( 'destroy.dot' );
}
$dot.data( 'dotdotdot-style', $dot.attr( 'style' ) || '' );
$dot.css( 'word-wrap', 'break-word' );
if ($dot.css( 'white-space' ) === 'nowrap')
{
$dot.css( 'white-space', 'normal' );
}
$dot.bind_events = function()
{
$dot.bind(
'update.dot',
function( e, c )
{
$dot.removeClass("is-truncated");
e.preventDefault();
e.stopPropagation();
switch( typeof opts.height )
{
case 'number':
opts.maxHeight = opts.height;
break;
case 'function':
opts.maxHeight = opts.height.call( $dot[ 0 ] );
break;
default:
opts.maxHeight = getTrueInnerHeight( $dot );
break;
}
opts.maxHeight += opts.tolerance;
if ( typeof c != 'undefined' )
{
if ( typeof c == 'string' || ('nodeType' in c && c.nodeType === 1) )
{
c = $('<div />').append( c ).contents();
}
if ( c instanceof $ )
{
orgContent = c;
}
}
$inr = $dot.wrapInner( '<div class="dotdotdot" />' ).children();
$inr.contents()
.detach()
.end()
.append( orgContent.clone( true ) )
.find( 'br' )
.replaceWith( ' <br /> ' )
.end()
.css({
'height' : 'auto',
'width' : 'auto',
'border' :...