显示阅读更多 link 如果文本超过一定长度

Question

好吧，我是新来的，我对 JavaScript 了解不多。我在这里看到类似的 post： How do I add a read more link at the end of a paragraph? 但我需要其他一些那里没有的东西。我使用这些 BB 代码在我的游戏网站中添加内容： [url=url进入游戏首页]游戏名称[img]图片link[/img][/url] [small]关于游戏的详细描述[/small]

我的要求是： 1.如果Description超过一定长度，显示read more link。 2. 我希望在描述中附加 ...（3 个点）和阅读更多内容 link。 3. 我需要相同的 url（url 到游戏主页）阅读更多 link 我在上面的 bbcode 中输入的

好吧，任何人都很难理解我的 requirements/question。我的英语也不太好。您可以查看此页面以了解有关我网站的更多信息。 http://only4gamers.wapka.me/site_25.xhtml 我已经有一个 js 代码，其中我得到了所有要求，但没有第三个要求。谁能告诉我该怎么做？

Answer 1

description="This text is really to long.";
var words=description.split(" ");
if(words.length>4){
 description=words.splice(0,4).join(" ")+"...<span>Show</span><div class='hide'>"+words.join(" ")+"</div>";
}
console.log(description);

如何获取描述由您决定，Show 功能尚未实现。只是为了给你一个开始......

Answer 2

如果您以 jquery 方式进行操作。

$('.comments p').text(function(_, txt) {
  if(txt.length > 36){
    txt = txt.substr(0, 36) + "...";
    $(this).parent().append("<a href='#'>Read More</a>");
  }
  $(this).html(txt)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="comments">
  <h3>Heading</h3>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>

<div class="comments">
  <h3>Heading</h3>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>

Answer 3

如果段落中的字符数超过一定长度，您可以使用 JavaScript 的 substring() method in combination with jQuery’s append() and html() 方法在段落末尾添加阅读更多 link。

HTML代码：

<p class="readMore">Class dolor ut sociosqu ad litora venenatis per conubia mollis, per consectetur vestibulum. Maecenas fermentum magna et leo eleifend bibendum. Nullam vitae aliquet nisi. In eu nibh sollicitudin, efficitur ligula lobortis, pharetra tellus. In ac blandit mauris. Aenean rhoncus consequat magna id commodo. Morbi quis eros rutrum libero scelerisque ullamcorper quis varius arcu. Nam vestibulum venenatis mollis. Proin consectetur metus et tortor interdum, eu eleifend mauris condimentum. Nunc varius tortor dolor, id pellentesque libero eleifend ut. </p>

JQuery代码：

$(document).ready(function() {
    var max = 200;
    $(".readMore").each(function() {
        var str = $(this).text();
        if ($.trim(str).length > max) {
            var subStr = str.substring(0, max);
            var hiddenStr = str.substring(max, $.trim(str).length);
            $(this).empty().html(subStr);
            $(this).append(' <a href="javascript:void(0);" class="link">Read more…</a>');
            $(this).append('<span class="addText">' + hiddenStr + '</span>');
        }
    });
    $(".link").click(function() {
        $(this).siblings(".addText").contents().unwrap();
        $(this).remove();
    });
});

你可以在这里看到一个例子：Show read more link if the text exceeds a certain length

显示阅读更多 link 如果文本超过一定长度

Show read more link if the text exceeds a certain length

javascript

css

bbcode