コンテナーの高さをアニメートする...段落の最後の単語に...を追加する

Question

div.infotextの中に段落が1つあります。そのdivの高さを120ピクセルにアニメートします。下にテキストがありますが、高さが低くなると表示されません。

そのdivにカーソルを置くとテキスト全体が表示されます。

私が今抱えている問題は、この段落内のより多くのテキストがあるという指標がないこと、です。表示されている最後の単語の最後に3つのドット（...）を追加して、divにカーソルを置いたときに消えるようにしたいと思います。

UPDATE：コードを追加しました。より多くのテキストがあります場合のdiv、の終わりに...追加されます

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

あなたは絶対位置でのdivの右下に<p>...</p>を追加し、ホバーにそれを隠すことができます。これは実際にカットされたテキストistのようにユーザーに見えます。例：

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

このCSSを追加...

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

。以前の表示/非表示コードはこれに影響することなく機能します。

Answer 3

1つの可能な方法scrollHeightが高さよりも大きい場合だけ、親のdivの右下に浮動div要素を追加することであろう

のようなものに見えるかもしれませんコード：

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

を

を入力し、divを展開したときにid = "overflow"を切り替えて非表示にします。

Answer 4

CSS3を使用すると、テキストを含む要素をオーバーフローしたときに起こるしたいものを定義することができ、テキスト-overflowプロパティを提供します。ブラウザのサポートは、あなたがここでそれについての詳細を読むことができるすべての主要なbrowsers-にあります：https://developer.mozilla.org/en/CSS/text-overflow

何をするべきことは、あなたのintrotextのCSSにテキスト-overflowプロパティを追加することです

Answer 5

どのようにこの件について：http://jsfiddle.net/M5rzC/4/