动画容器高度,添加...到段落中的最后一个单词

Question

我有一个div.infotext,里面有一个段落.我将该div的高度设置为120px.所以下面有更多的文字,没有显示,因为高度削减了它.

当我悬停那个div时,整个文本出现.

我现在面临的问题是,没有迹象表明本段内有更多文字.我想在显示的最后一个单词的末尾添加三个点(...),并在我徘徊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

您可以<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>