1

我从 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>

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

在此处输入图像描述

4

4 回答 4

3

试试这个片段：

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/

于 2012-11-07T01:04:49.677 回答
2

为什么要在意字数？给定数量的单词占用的区域可能会因单词的长度而有很大差异。最好的方法可能是用 CSS/javascript 来处理这个问题。

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

于 2012-11-07T01:04:44.213 回答
1

通常，您将在服务器端处理“预告片”文本的格式，您可以在服务器端使用您想要创建 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/

于 2012-11-07T01:10:34.423 回答
0

你可以试试这样

var text=$("#paragrah").html().substring(1,200)​;
$("#paragrah").html(text + '...' );​​​​
于 2012-11-07T01:21:14.570 回答