Animare altezza contenitore, aggiungere ... alla parola precedente nel paragrafo

Question

Ho un div.infotext con un paragrafo all'interno. Animare l'altezza di quel div a 120 px. Quindi c'è più testo qui sotto, che non è mostrato, come l'altezza lo interrompe.

L'intero testo viene visualizzato quando si passa il mouse su quel div.

Il problema che sto avendo ora è che non c'è nessun indicatore che ci sia più testo all'interno di questo paragrafo. Mi piacerebbe aggiungere tre punti (...) alla fine dell'ultima parola che viene mostrata, e scomparire quando sono in bilico sul div.

Qualche idea?

UPDATE: Aggiunto il codice.

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

È possibile aggiungere <p>...</p> in basso a destra del div con posizionamento assoluto e nasconderlo su hover. Questo sembrerà all'utente come se il testo fosse effettivamente tagliato. Esempio:

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

Aggiungi il css ...

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

che aggiungerà il ... alla fine del div, se c'è più testo. Il tuo precedente show/hide code funzionerà comunque senza influire su questo.

Answer 3

Un modo possibile potrebbe essere quella di aggiungere solo un div galleggiante in basso a destra del div genitore se scrollHeight è superiore all'altezza

Il codice potrebbe essere simile:

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

e quindi attivare/disattivare id = "overflow" per nasconderlo quando il div è espanso.

Answer 4

CSS3 fornisce la proprietà di overflow del testo in cui è possibile definire cosa si desidera che si verifichi quando il testo supera l'elemento che lo contiene. supporto del browser c'è in tutti i principali browsers- si può leggere di più qui: https://developer.mozilla.org/en/CSS/text-overflow

Che cosa si dovrebbe fare è quello di aggiungere proprietà text-overflow per il vostro introtext css

Answer 5

ne dite di questo: http://jsfiddle.net/M5rzC/4/