Question

我看到了这个演示http://viralpatel.net/blogs/demo/jquery/show-more-link-shortened-content/并试图实现它;如何将限制设置为10个字母？

<script type="text/javascript">
     document.write(str.substring(0, 29) + 
         "<a href='javascript:show('test');'>show/hide</a>");
     document.write("<style type='text/css'>.hidden{display:none}<\/style>");
     function show(area) {
         var obj = document.getElementById(area)
         obj.style.display = (obj.style.display == 'inline') ? 'none' : 'inline'
     }
</script>
<p><strong>This is the result, just test it yourself:</strong></p>

Some text has been hidden. <a href="javascript:show('test');">show/hide</a>
<span class="hidden" id="test">
    Yes, this was hidden.<br>bladiebla bladiebladiebla was also hidden.
</span>

Answer 1

在完整演示中，有一个jQuery函数，其变量为var showChar = 100;。

我认为你会将变量改为你想要的多少个字符。

Answer 2

我已将解决方案包含在下面的问题中。而不是查看它所考虑的父级宽度的字符数量，并将“预览文本”保留在一行上并将其剪切掉，以便它不会到达它的容器之外。用户可以单击“更多”按钮以查看完整描述。这很有用，因为它可以用在您不知道要显示的理想字符数量的响应式网站中。

http://jsfiddle.net/austinpray/3xu9R/

JS（jQuery或Zepto）

function checkLength() {
    this.showing = new Array();
}

checkLength.prototype.check = function() {
    var that = this;
    $('.article').each(function (index) {
        var article = $(this);
        var theP = article.find('p');
        var theMore = article.find('.more');
        if (theP.width() > article.width()) {
            theMore.show();
            that.showing[index] = true;
        } else {
            if (!article.hasClass('active')) {
                theMore.hide();
                that.showing[index] = false;
            } else {
                that.showing[index] = false;
            }
        }
        theMore.text(that.showing[index] ? "More..." : "Less...");
    });
};

$(function () {
    var checker = new checkLength();
    checker.check();
    $('.more').each(function () {

        $(this).on('click', function (e) {
            $(this).closest('.article').toggleClass('active');
            checker.check();
        });
    });

    $(window).resize(function() {
        checker.check()
    });
});

编辑：添加了show less选项。我想有更好的方法来做到这一点。可能会通过javascript添加“更多”和“更少”，因此它不会混淆语义。

如果文本超过10个字母，则显示更多/更少选项

2 个答案:

JS（jQuery或Zepto）