jQuery - how to avoid cut words - read more

Question

I have problem with my code, because I want to make "read more" in my posts... but this script cuts my words...

Example..

This is example text to cut

After cut:

Thix is example te...

I woud like to get:

Tix is example text...

$(document).ready(function() {
 var showChar = 45;
 var ellipsestext = "...";
 var moretext = "more";
 var lesstext = "less";
 $('.cut').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;
 });
});

a {
 color: #0254EB
}
a:visited {
 color: #0254EB
}
a.morelink {
 text-decoration:none;
 outline: none;
}
.morecontent span {
 display: none;
}
.comment {
 width: 400px;
 background-color: #f0f0f0;
 margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="comment cut">
 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 class="comment cut">
 Duis nisl nibh, egestas at fermentum at, viverra et purus.
</div>
<div class="comment cut">
 consectetur adipiscing elit. Proin blandit nunc sed sem dictum id feugiat quam blandit.
 Donec nec sem sed arcu interdum commodo ac ac diam. Donec consequat semper rutrum.
 Vestibulum et mauris elit. Vestibulum mauris lacus, ultricies.
</div>

Could you help me modify this code? I tried but I get error. Greet.

Modify what code? There is no code in the question where it should be. Questions should be self contained and we shouldn't have to go off site just to review your issue. demos are great but only as support for what actually exists in the question itself. See [ask] and [mcve] — charlietfl, May 18 '18 at 00:47
Your example doesn't make a lot of sense. You want it to truncate with an ellipsis, change a character (This => Thix), and remove a character (Thix => Tix)?!? — Heretic Monkey, May 18 '18 at 00:58

score 1 · Answer 1 · answered May 18 '18 at 00:53

Looking at your fiddle, it's a bit hacky but you could use this:

var c = content.substr(0, showChar);
var csplit = c.split(" ").pop();
c = csplit.join(" ");
var h = content.substr(c.length, content.length - showChar);

Instead of this:

var c = content.substr(0, showChar);
var h = content.substr(showChar-1, content.length - showChar);

There's definitely a more elegant way to do this however

jQuery - how to avoid cut words - read more

1 Answers1