Animar la altura del contenedor, agregar ... a la última palabra en el párrafo

Question

Tengo un div.infotext con un párrafo dentro. Yo animo la altura de ese div a 120px. Entonces, hay más texto debajo, que no se muestra, ya que la altura lo corta.

Aparece el texto completo cuando cierro ese div.

El problema que estoy teniendo ahora es que no hay indicador de que haya más texto dentro de este párrafo. Me gustaría agregar tres puntos (...) al final de la última palabra que se muestra, y desaparecer cuando muevo el div.

¿Alguna idea?

ACTUALIZACIÓN: Agregó el código.

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

Puede agregar <p>...</p> a la esquina inferior derecha del div con posicionamiento absoluto y ocultarlo al pasar el cursor sobre él. Esto parecerá para el usuario como si el texto realmente estuviera cortado. Ejemplo:

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

Añadir este css ...

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

que agregará la ... al final de la div, si hay más texto. Su código show/hide anterior seguirá funcionando sin afectar esto.

Answer 3

Una forma posible sería simplemente añadir un div flotante en la parte inferior derecha de la div padre si scrollHeight es mayor que la altura

El código podría ser algo como:

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

y luego tiene un botón alternar en id = "overflow" para ocultarlo cuando el div se expande.

Answer 4

CSS3 proporciona una propiedad de desbordamiento de texto en la que puede definir lo que desea que suceda cuando el texto sobrepasa el elemento contenedor. soporte de los navegadores no es en todos los principales browsers- se puede leer más sobre esto aquí: https://developer.mozilla.org/en/CSS/text-overflow

Lo que usted debe hacer es añadir una propiedad de texto de desbordamiento a su css introtext

Answer 5

¿Qué tal esto: http://jsfiddle.net/M5rzC/4/