Question

我在Html中创建了解更多代码。

一切都很好。但是当我点击阅读更多时。然后它显示数据以及文本省略号属性，即。的 ... * 即可。我希望阅读更多文字成为下一行的中心，但我会显示 ... 。

mauris 文字后有三个点 ... 。

如何删除它。

   $(document).ready(function() {
        var showChar = 400;
        var ellipsestext = "...";
        var moretext = "Read More";
        var lesstext = "Read Less";
        $('.more').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="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span><div class="text-center margin_top_10"><a href="" class="morelink">'+moretext+'</a></div></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;
        });
    });

.comment {
  width: 93%;
  margin: 0 auto;
}
a.morelink {
  outline: none;
  color: #5bc0de !important;
}
.morecontent span {
  display: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row b-t padding_top_bottom_10">
<div class="col-md-12 col-sm-12 col-xs-12 ">
<div class="comment more font_size_14"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Vestibulum laoreet, nunc eget laoreet sagittis,
  quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
  Duis eget nisl orci. Aliquam mattis purus non mauris
  blandit id luctus felis convallis.
  Integer varius egestas vestibulum.
  Nullam a dolor arcu, ac tempor elit. Donec.
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Vestibulum laoreet, nunc eget laoreet sagittis,
  quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
  Duis eget nisl orci. Aliquam mattis purus non mauris
  blandit id luctus felis convallis.
  Integer varius egestas vestibulum.
  Nullam a dolor arcu, ac tempor elit. Donec. </div>
  </div>
</div>

Answer 1

在点击

上的阅读更多按钮中添加$(".moreelipses").toggle();

$(document).ready(function() {
        var showChar = 400;
        var ellipsestext = "...";
        var moretext = "Read More";
        var lesstext = "Read Less";
        $('.more').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="moreelipses">'+ellipsestext+'</span><span class="morecontent"><span>' + h + '</span><div class="text-center margin_top_10"><a href="" class="morelink">'+moretext+'</a></div></span>';

                $(this).html(html);
            }

        });

        $(".morelink").click(function(){
            if($(this).hasClass("less")) {
                $(this).removeClass("less");
                $(this).html(moretext);
            } else {
                $(this).addClass("less");
                $(this).html(lesstext);
            }
            $(".moreelipses").toggle();
            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        });
    });

.comment {
  width: 93%;
  margin: 0 auto;
}
a.morelink {
  outline: none;
  color: #5bc0de !important;
}
.morecontent span {
  display: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row b-t padding_top_bottom_10">
<div class="col-md-12 col-sm-12 col-xs-12 ">
<div class="comment more font_size_14"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Vestibulum laoreet, nunc eget laoreet sagittis,
  quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
  Duis eget nisl orci. Aliquam mattis purus non mauris
  blandit id luctus felis convallis.
  Integer varius egestas vestibulum.
  Nullam a dolor arcu, ac tempor elit. Donec.
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Vestibulum laoreet, nunc eget laoreet sagittis,
  quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
  Duis eget nisl orci. Aliquam mattis purus non mauris
  blandit id luctus felis convallis.
  Integer varius egestas vestibulum.
  Nullam a dolor arcu, ac tempor elit. Donec. </div>
  </div>
</div>

Answer 2

只需更改ellipsestext =＆＃34; ...＆＃34;到＆＃34;＆＃34;

 $(document).ready(function() {
        var showChar = 400;
        var ellipsestext = "";
        var moretext = "Read More";
        var lesstext = "Read Less";
        $('.more').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="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span><div class="text-center margin_top_10"><a href="" class="morelink">'+moretext+'</a></div></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;
        });
    });

Answer 3

使用readmore.js jquery插件。

在此处获取：http://jedfoster.com/Readmore.js/

Html阅读更多代码

3 个答案: