Question

我的文本内容是从mysql输出的，但我们现在可以将其视为纯文本。我想将我的单词限制为120个单词，然后添加切换show more按钮。我知道切换很容易实现，但我真的不知道如何限制我的单词并自动插入显示更多切换按钮。

这是我的代码

<div id="paragrah">
    Donec vitae mollis leo. Quisque ut metus ac velit porttitor sollicitudin quis mattis purus. Quisque id risus id sem porta gravida eu nec neque. Praesent non odio nibh, vitae tincidunt sapien. Maecenas rutrum mollis mauris, eu condimentum nunc viverra nec. Donec fringilla imperdiet volutpat. Morbi in sem ante. Phasellus libero purus, viverra a aliquam ac, eleifend eu nisl. Etiam quis odio nec quam rhoncus iaculis ac quis velit. Sed ut lacus quis enim tempor ullamcorper. Donec odio ligula, porta et bibendum aliquam, blandit vitae lacus.
    <div class="myimage">picture</div>
    <div class="myimage">picture</div>
    <div class="myimage">picture</div>
</div>

我还附上一张图片来解释我期望实现的目标。

enter image description here

Answer 1

试试这个代码段：

function excerpt(str, nwords) {
  var words = str.split(' ');
  words.splice(nwords, words.length - 1);
  return words.join(' ') + '&hellip;';
}

然后使用data缓存原始内容并创建一个按钮，根据文本“显示”或“隐藏”在data和excerpt之间切换。

演示： http://jsfiddle.net/elclanrs/QLYey/

Answer 2

为什么你关心单词的数量？给定数量的单词占用的区域可能会有很大差异，具体取决于单词的长度。最好的方法可能是用CSS / javascript来处理它。

使div成为固定高度并为其提供文本溢出设置（您可以为溢出定义自定义字符串）。然后使用javascript扩展，你可以只是一个覆盖固定高度和文本溢出的类，为你提供完整的内容。

Answer 3

通常，您将处理服务器端“预告”文本的格式，您可以使用任何语言来创建HTML。然后，客户端可以运行JavaScript来扩展隐藏在页面中的内容。一个完整的例子在jsfiddle的底部与多个可扩展部分链接。

使用jQuery扩展代码：

$('.show-more').click(function(event) {
    $(event.target)
        .closest('.expando')
            .find('.three-dots')
                .remove()
                .end()
            .find('.rest')
                .show()
                .end()
            .end()
        .detach();
});

关于jsfiddle的工作示例：http://jsfiddle.net/wJMh9/3/

Answer 4

你可以这样尝试

var text=$("#paragrah").html().substring(1,200);
$("#paragrah").html(text + '...' );

jQuery文本显示有限和切换

4 个答案: