<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h2>Java read-more กำหนด จำนวนตัวอักษรเอง</h2> <br> <div class="row"> <div class="col-12"> <div class="comment more font_size_14"> Bootstrap 4 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. <p></p> Bootstrap 4 is completely free to download and use! </div> <div class="col-xl-2"></div> </div> </div> </div>

.container{ padding:5%; } a.morelink { outline: none; color: #5bc0de !important; } .morecontent span { display: none; }

$(document).ready(function() { var showChar = 170; 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; }); });