0

I'm trying to truncate the amount of text in a div when the text reaches 40 characters in length and add an ellipsis after the truncation. This is my code: 

jQuery(document).ready(function($) {
$(".trim").text(function(index, text) {
return text.substr(0, 40)+' ...';
});
});

The problem is it adds the ellipsis even if the character length is less than 40 characters, adding an ellipsis even when the text is no truncated. So next I tried a conditional to run the function only if the character length is less than 40 characters, to no avail:

jQuery(document).ready(function($) {
if($(".trim").length > 40) {
$(".trim").text(function(index, text) {
return text.substr(0, 40)+' ...';
});
}
});

Any ideas?

scmccarthy22
  • 623
  • 8
  • 19

1 Answers1

4

You're almost there! Your condition is not checking against the length of the text in the div. You are checking the .length of the jQuery object, which would be equal to 1 (number of elements found by the selector). You need to check against the length of the actual text inside the div. Get rid of the if outside and move the length-check inside the function that you pass into .text():

$(".trim").text(function(index, text) {
    var newText = text;

    if(text.length > 40) {
        newText = text.substr(0, 40) + "...";
    }

    return newText;
});
Vivin Paliath
  • 94,126
  • 40
  • 223
  • 295
  • Perfect! Thanks, Vivin. Now a great little script. – scmccarthy22 Nov 13 '13 at 22:35
  • Actually, Vivin, what I'm trying to truncate is a sentence that contains a link. When I use this script, it does truncate the sentence, but it also breaks the link. Any ideas on how to avoid this? Am I correct that it's counting the characters in the html and not the "outputted" text? – scmccarthy22 Nov 14 '13 at 18:10
  • Could you post that again using backticks? Raw HTML is ignored so I cannot see what it is that you are trying to truncate. – Vivin Paliath Nov 14 '13 at 18:11
  • This is the the line of html/php I'm trying to truncate: `Course: ID, 'courses', '', ', ', '' ); ?>` The php function is a Wordpress function that outputs the name of a "course". Sometimes the "course" text (the name of a course) is too long, so I want to keep it to 40 characters. This Wordpress php function returns the "course" as a link, which is what I need. The script is truncating the "course," but is stripping away the link. – scmccarthy22 Nov 14 '13 at 18:45
  • That's because it's giving you the text inside the `.trim` element. You probably want to change the selector to `$(".trim span")` so that you end up working with the actual `span` elements. – Vivin Paliath Nov 14 '13 at 19:22
  • sorry -- i actually changed the html `` to `` so the script is only targeting inside the . Seems like that Wordpress php function is breaking somehow. – scmccarthy22 Nov 14 '13 at 19:38
  • 1
    AH EASY - I just add another selector `$(".trim a")` to work with just the link elements and problem solved. Thanks, Vivin. – scmccarthy22 Nov 14 '13 at 19:52
  • Glad you were able to figure it out! :) – Vivin Paliath Nov 14 '13 at 19:53