显示更多看到更少的字符限制或内容高度限制

Question

如果没有更多文字可查看，我需要让“查看更多”按钮消失。我认为最好的方法是在文本接近 365px 容器高度时进行字符计数并粗略计算。

有没有人有建议以及如何最好地编辑脚本以引入字符规则？

    $("[id^=infopanelcollapse]").click(function() {
        $(this).toggleClass("btn-more");
        $(this).prev().toggleClass("expand");
    });

        $("[id^=infopanelcollapse]").click(function() {
            $(this).toggleClass("btn-more");
            $(this).prev().toggleClass("expand");
        });

.product-overflow {
  max-height: 365px;
  min-height: 365px;
  overflow: hidden;
  position: relative;
}
.product-overflow.expand {
  max-height: none;
  height: auto;
  overflow: hidden;
}
.expand-button .less, .expand-button.btn-more .more {
  display: none;
}
.expand-button .more, .expand-button.btn-more .less {
  display: block;
}
.expand-button {
text-align:center;
text-decoration:underline;
cursor:pointer;
}
.product-overflow:before {
  content: "\00a0";
  height: 120px;
  width: 100%;
  position: absolute;
  display: block;
  bottom: 0;
  z-index: 1;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}
.product-overflow.expand:before {
  height: 0;
}

<div class="row product-overflow">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor lacinia, bibendum nunc non, auctor ipsum. Quisque non placerat mauris, efficitur interdum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi ac risus eu ante rhoncus fringilla in vel dui. Pellentesque felis libero, mollis sit amet faucibus eget, placerat eu nibh. Curabitur auctor eget nisl eu faucibus. Aenean id elementum mi, ac maximus eros. Aenean bibendum felis vitae metus dictum cursus. Praesent ac nisl eros. Proin mi justo, molestie a leo vel, facilisis vehicula quam. In euismod pulvinar dignissim. Ut iaculis nulla vel lacinia dapibus. Maecenas quis ex ut purus facilisis mattis et in eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor lacinia, bibendum nunc non, auctor ipsum. Quisque non placerat mauris, efficitur interdum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi ac risus eu ante rhoncus fringilla in vel dui. Pellentesque felis libero, mollis sit amet faucibus eget, placerat eu nibh. Curabitur auctor eget nisl eu faucibus. Aenean id elementum mi, ac maximus eros. Aenean bibendum felis vitae metus dictum cursus. Praesent ac nisl eros. Proin mi justo, molestie a leo vel, facilisis vehicula quam. In euismod pulvinar dignissim. Ut iaculis nulla vel lacinia dapibus. Maecenas quis ex ut purus facilisis mattis et in eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
</div>

<div id="infopanelcollapse" class="expand-button text-center"><span class="more">See more <span class="halflings chevron-down"></span></span><span class="less">See less <span class="halflings chevron-up"></span></span></div>

大家好 JSFiddle

Answer 1

添加隐藏类并在需要时添加或删除：

https://jsfiddle.net/otjjffmc/2/

    var containerHeight = $('#mainContainer').height();    
        var contentHeight = $('#content').height();

        if(contentHeight > containerHeight) {

        $('#infopanelcollapse').removeClass('hidden'); //remove class if content is bigger than container : i.e show the button

        $("[id^=infopanelcollapse]").click(function() {
                    $(this).toggleClass("btn-more");
                    $(this).prev().toggleClass("expand");
                });
        }
        else{
            $('#infopanelcollapse').addClass('hidden'); //add hidden class if content is smaller than div, i.e hide button
        }