I have a div that displays a bunch of text but I only want 75 characters to be displayed and the rest of the text is replaced by ...

<div class="text-info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>

$('text-info').replaceWith(this).length(75 + "...");

I have a div that displays a bunch of text but I only want 75 characters to be displayed and the rest of the text is replaced by ...

<div class="text-info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>

$('text-info').replaceWith(this).length(75 + "...");

• javascript
• jquery

4 Answers 4

var text = $(".text-info").text();
var len = text.length;

if(len > 75){
  $(".text-info").text($(".text-info").text().substr(0,74)+'...  ');
}

You may try this

$(".text-info").text(function(){
    return $(this).text().length > 75 ? $(this).text().substr(0, 75)+'...' : $(this).text();
});

DEMO.

Taking your question literally, if you only want 75 characters displayed then you could simply do as @MohammadAdil suggets. However you'll end up with 79 characters (74 + 3 (...) + two spaces. Simply limit that by pulling 72 characters and append the "...". That is of course if you actually need the limit to be 75 visible characters or if you just meant 75 characters of the post and then add on the ellipsis.

My personal remendation is to leave this up to a library that can do it for you (or use one if you can). Underscore is a fairly small library that contains a slew of handy utilities and it does the work of determining if you can built in vs. their implementation (such as _.each using Array#forEach if it's defined). That being said, underscore.string is an addon for underscore that contains a number of usefule string manipulation functions like _.toSentence which will take and array like ["one", "two", "three"] and return "one, two and three" but more importantly you get truncate and prune.

truncate and prune will only perform the truncation if the string is at it's limit, such that per their exampe:

// Assume the underscore.string functions have bene mixed into _
_.truncate("Hello, World", 5) // "Hello..."
_.truncate("Hello", 10) // "Hello"

The truncate function will cut the text mid sentence, which is where prune is a cleaner alternative as it chops text at the closest word break to the length specified. Per their example:

_.prune("Hello, cruel world", 15) // "Hello, cruel..."
// for parison
_.truncate("Hello, cruel world", 15) // "Hello, cruel wo..."

Something like this will work:

(".text-info").text($(this).text().substr(0, 75)+'...');

Also, dont forget the class identifier in your selector. .