CODEWITHSUNDEEP
jquery
James
James

Reputation: 135

How to cut off text inside a div when it reaches a certain # of characters in jQuery?

I know there are lots of truncate scripts out there, but I can't use most of them due to integration issues with the cms I am working on.

Basically I must do it this way:

  1. get a count of the characters inside a div
  2. if count exceeds a certain amount (lets say 10 characters) the text inside the div should be cut off and have "..." appended to the end.

Being terrible at javascript here is my lame non-working attempt:

if ($('div.text').val().length > 10) {

   //     

   ($('div.text').append('...');

}

Can someone please help?

Upvotes: 7

Views: 20987

Answers (8)

alex
alex

Reputation: 231

If you dont want to cut off in the middle of the word, just do the following:

  if ($("div.text").text().length > 10) {
    var ttext = $("div.text").text().substr(0, 10);
    ttext = ttext.substr(0, ttext.lastIndexOf(" "))  + '...';
    $("div.text").text(ttext);
  }

Upvotes: 1

GrigorTaff
GrigorTaff

Reputation: 11

Thanks for the question and answers. I used this code for multiples titles and it's helped me:

$('span.title-cut').each(function() {
        var title = $(this).text();
        if (title.length > 10) {
        title = title.substr(0, 10) + '...';    
        }
        $(this).text(title);
     });

Upvotes: 0

wsanville
wsanville

Reputation: 37516

You're looking for the CSS property text-overflow: ellipsis. This is supported by most browsers (even IE7+), but Firefox only supports it as of version 7. For older browser support, you can use some existing jQuery plugins.

Upvotes: 8

Aron Rotteveel
Aron Rotteveel

Reputation: 83173

You could use something like this:

$('div.text').each(function() {
    var maxchars = 250;
    var seperator = '...';

    if ($(this).text().length > (maxchars - seperator.length)) {
        $(this).text($(this).text().substr(0, maxchars-seperator.length) + seperator);
    }
});

Live example.

Upvotes: 2

Surreal Dreams
Surreal Dreams

Reputation: 26380

var string_limit = 10;

if ($('div.text').text().length > string_limit )
    $('div.text').text($('div.text').text().substring(0, string_limit -1) + '...');
}

This checks for the length limit you specify in string_limit. If it's too long, it cuts the text down to the limited length (not accounting for word borders, punctuation, etc - length only), adds an ellipsis, and sets the content to the shortened version.

Upvotes: 0

Mark Coleman
Mark Coleman

Reputation: 40863

You can pass a function to the .text() method to do your string manipulation like so:

$('div.text').text(function(i, text) {
    var t = $.trim(text);
    if (t.length > 10) {
        return $.trim(t).substring(0, 10) + "...";
    }
    return t;
});

Code example on jsfiddle.

Upvotes: 1

Frédéric Hamidi
Frédéric Hamidi

Reputation: 262939

You can do something like:

$("div.text").each(function() {
    var $this = $(this);
    var text = $this.text();
    if (text.length > 10) {
        $this.text(text.substr(0, 7) + "...");
    }
}

Upvotes: 0

Geoff
Geoff

Reputation: 9340

if ($('div.text').text().length > 10)

or

if ($('div.text').html().length > 10)

div elements don't have a "value" as returned by val(), but they do have text or html

and then you probably want to truncate the text like

var text = $('div.text').text();
text = text.substr(0,10) + '...';
$('div.text').text(text);

Upvotes: 14

Related Questions