Html阅读更多代码 [英] Html Read More code

问题描述

我正在Html中创建阅读更多代码。

一切工作正常。但是当我点击阅读更多时。那么它会显示数据以及文本省略号属性即。的 ... * 即可。我希望阅读更多文字在我所获得的下一行中居中，但它也会显示 ... 。

mauris 文字后有三个 ... 。

真正的data-babel =false>

$（document）.ready （function（）{var showChar = 400; var ellipsestext =...; var moretext =Read More; var lesstext =Read Less; $（'。more'）。each（functi on（）{var content = $（this）.html（）; if（content.length> showChar）{var c = content.substr（0，showChar）; var h = content.substr（showChar-1，content.length - showChar）; < span class =moreelipses>< span>'+ h +'< span>< / span>< div class =text-center margin_top_10>< a href =class =morelink>'+ moretext +'< / a>< / div>< / span>' ; $（本）的.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 = stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>< div class =row bt 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坐在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非mauris blandit id luctus felis convallis。 Integer varius egestas vestibulum。 Nullam a dolor arcu，ac tempor elit。 Donec。 Lorem ipsum dolor坐在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非mauris blandit id luctus felis convallis。 Integer varius egestas vestibulum。 Nullam a dolor arcu，ac tempor elit。 Donec。 < / DIV> < / div>< / div>  

解决方案

添加 $（。moreelipses）。toggle（）; 在阅读更多按钮onClick

< preclass =snippet-code-js lang-js prettyprint-override> $（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_to p_10>< a href =class =morelink>'+ moretext +'< / a>< / div>< / span>'; $（本）的.html（HTML）; }}）; $（。morelink）。click（function（）{if（$（this）.hasClass（less））{$（this）.removeClass（less）; $（this）.html（moretext） （）;}（）。$（this）; $（this）.parent（）。 ）.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 = stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>< div class =row bt 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坐在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非mauris blandit id luctus felis convallis。 Integer varius egestas vestibulum。 Nullam a dolor arcu，ac tempor elit。 Donec。 Lorem ipsum dolor坐在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非mauris blandit id luctus felis convallis。 Integer varius egestas vestibulum。 Nullam a dolor arcu，ac tempor elit。 Donec。 < / DIV> < / div>< / div>  

I am creating Read More Code in Html.

Everything is working fine. but when I click on Read More . then it displays data along with text-ellipsis property ie. ...*. I want Read More text to be center in next line which I am getting but it displays ... also.

There is three dots ... after mauris text.

How can I remove that.

   $(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>

解决方案

Add $(".moreelipses").toggle(); in read more button onClick

$(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>

这篇关于Html阅读更多代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！