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

Question

I have a div.infotext with one paragraph inside. I animate the height of this div by 120 pixels. Thus, the text below, which is not shown, since the height is turned off.

All text appears when I find this div.

The problem I'm currently facing is that there is no indicator that there is more text inside this paragraph. I would like to add three dots (...) at the end of the last word to be shown, and disappear when I vibrate the div.

Any idea?

UPDATE: Added 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

<p>...</p> div . , , . :

CSS:
.more {
 position:absolute;
 bottom:0;
 right:0;
 background: #fff;
}

.container {
 position:relative;
 height:120px;
 overflow: hidden;
}

HTML:
<div class="container">
 <p>Fill in a lot of text here</p>
 <p class="more">...</p>
</div>

Answer 2

CSS3 , , , . : : https://developer.mozilla.org/en/CSS/text-overflow

, introtext css

Answer 3

css...

div.infotext
{
    overflow: hidden;
    text-overflow: ellipsis;
}

... div, . / , .

Answer 4

- div div, scrollHeight

:

if ($(element)[0].scrollHeight > $(element).height()) {
  $(element).append('<div style="position:absolute;bottom:0;right:0" id="overflow">...</siv>');
}

and then switch to id = "overflow" to hide it when expanding the div.

Answer 5

How about this: http://jsfiddle.net/M5rzC/4/