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

CSS3提供了文本溢出属性，您可以在其中定义文本溢出包含元素时要发生的内容。浏览器支持适用于所有主流浏览器 - 您可以在此处阅读更多相关信息：https://developer.mozilla.org/en/CSS/text-overflow

您应该做的是将文本溢出属性添加到您的introtext css

Answer 2

添加此css ...

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

这将在div的末尾添加...，如果还有更多的文字。您之前的显示/隐藏代码仍然可以正常运行而不会影响它。

Answer 3

您可以使用绝对定位将<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 4

如果scrollHeight大于height

，一种可能的方法是在父div的右下方附加一个浮点div。

代码可能类似于：

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

然后在id =“overflow”上进行切换以在div展开时隐藏它。

Answer 5

这个怎么样：http://jsfiddle.net/M5rzC/4/

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

5 个答案: