Animate container height, add ... to last word in paragraph

Question

I have a div.infotext with one paragraph inside. I animate the height of that div to a 120px. So there is more text below, which is not shown, as the height cuts it off.

The whole text appears when i hover that div.

The issue i'm having now is, that there is no indicator that there is more text inside this paragraph. I'd like to add three dots ( ... ) at the end of the last word that is shown, and to disappear when i'm hovering the div.

Any idea?

UPDATE: Added the code.

function enableHoverQuotes(){

var height3 = $('.c2244').height();
$('.introtext').css({ height: '107px', overflow: 'hidden' });

$(".introtext").hoverIntent(showInfoText,hideInfoText);

function showInfoText(){ $(this).animate({'height':height3}, 600); }
function hideInfoText(){ $(this).animate({'height':'107'}, 600); }

}

Answer 1

CSS3 provides text-overflow property where you can define what you want to happen when text overflows the containing element. Browser support is there in all major browsers- you can read more about it here: https://developer.mozilla.org/en/CSS/text-overflow

What you ought to do is to add text-overflow property to your introtext css