javascript readmore功能？

Question

这是html：

<div class="wrapper">
<div class="small">
    <p>Lorenter code hereem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div> <a href="#">Click to read more</a>

这是css：

.small {
    height: 20px;
    overflow:hidden;
}
.big {
    height: auto;
}

这是javascript：

$('.wrapper').find('a[href="#"]').on('click', function (e) {
    e.preventDefault();
    this.expand = !this.expand;
    $(this).text(this.expand?"Click to collapse":"Click to read more");
    $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});

问题是它总是显示点击扩展，虽然我的一些文本（从gemrate enarate itnarate），真的很短，不需要readmore功能

所以任何人都可以提出一些身高条件，这样当文字处于一定高度时，他们就不会显示点击以阅读更多

这是一个示例FIDDLE： http://jsfiddle.net/mWcmg/302/

Answer 1

以下是您要找的内容：

$('.wrapper').each(function() {
    var content = $(this).find('.small');
    var expand = $(this).find('a[href="#"]');
    if (content.height() < 200) {
        expand.hide();
    } else {
        expand.click(function() {
            content.toggleClass('small big');
        });
    }
});

Answer 2

if ($('.small').height() < 300) {
  $('a').css({'visibility': 'hidden'});   
}

我刚把它添加到你脚本的底部。您可以检查小div的高度并隐藏＆＃39; a＆＃39;标记，如果它的高度低于某个阈值

Answer 3

使用element.offsetHeight，element.offsetWidth，element.scrollHeight和element.scrollWidth，您可以确定element的内容是否大于其大小：

if (element.offsetHeight < element.scrollHeight ||
    element.offsetWidth < element.scrollWidth) {
    // your element have overflow
} else {
    // your element doesn't have overflow
}