Question

我目前正在尝试使用“查看更多”按钮在网页上创建一个带有文本内容的div，该按钮允许该框展开并取消隐藏溢出内容。但是，如果实际存在溢出，我只希望“看到更多”可见。

是否有某些方法，在JavaScript中或其他方面，我可以检测到这个？

Answer 1

if (element.scrollHeight > element.offsetHeight) {
    alert('Overflow!');
}

Fiddle

Answer 2

您可以在文本周围添加一个包装器，并将包装器高度与父高度进行比较。

FIDDLE

JS

if ($('.wrapper').height() > $('#text').height()) {
    //do stuff
}
else { 
    //do other stuff like hide buttons 
}

HTML

<div id="text">
    <div class="wrapper">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in rutrum lorem. Donec eget turpis arcu. Fusce at neque libero. Nam sed risus velit. Fusce eleifend leo ac laoreet dapibus. Morbi vel tincidunt tortor. Vivamus placerat elit nec mi pulvinar, vitae volutpat nisi tempus.</div>
</div>
<button id="show">show more (only show this button if there is overflow)</button>
<button id="hide" style="display: none">hide</button>

有没有办法在html中使用JavaScript检测溢出？

2 个答案: