Question

我有一个事实框，内容可能与p, li or img tags不同，内容长度也可能不同。因此，我尝试制作仅显示内容的一部分的功能，以及"read more"的按钮。

但我的问题是，当我使用子字符串来计算从哪里开始，在哪里停止，并将按钮“读取更多”，但它既包含HTML文本又包含纯文本，但我只需要纯文本。

所以我的问题是：如何删除所有HTML文本并获取纯文本，因此无论我的事实框中的内容类型无关紧要，它仍然只显示部分文本，并隐藏其余部分，带有一个按钮，可以选择显示更多。 ??

我的功能只显示事实框中的部分：

$(document).ready(function () {
var showChar = 100;
var ellipsestext = "...";
var moretext = "Read more";
var lesstext = "less";

$('.showMoreLess').each(function () {
    var content = $(this).html();

    if (content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar - 1, content.length - showChar);
        var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

        $(this).html(html);
    }

});

$(".morelink").click(function () {
    if ($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
    } else {
        $(this).addClass("less");
        $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
});

}）;

和我的HTML，以及它可能会改变它包含的内容

<div class="fact-banner">
     <h4 class="title">fact headline</h4>
     <div class="showMoreLess">
          <div class="text">
                <p>blablabla</p>
                <p>blablabla</p>
                <p>blablabla</p>
                <p>blablabla</p>
          </div
          <div class="img">
                 <div class="image-banner text" style="padding-top: 0;margin-top:0">
                    <div class="image">
                        <img src="/bla.jpg" alt="bla" />
                    </div>
                    <div class="title">
                        <p>imageText</p>
                    </div>
                </div>
          </div> 

          <div class="text" style="padding-top: 0; padding-bottom: 0">
                <a href="linkToRelevantsite"> Relevant site to the article </a>
          </div>
      </div>

我希望我有意义:)）

Answer 1

尝试使用.text()代替.html()：

var content = $(this).text();

Answer 2

你问题的措辞绝对令人困惑。我认为你想要的是overflow:hidden;而不是实际删除标签。

在.text-wrapper附加.text。折叠时.text-wrapper将具有固定高度，展开时高度会自动调整。 .text-wrapper将overflow: hidden。

这是一个快速的代码： http://codepen.io/anon/pen/mVZNvv

想要阅读更多选项

2 个答案: