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开发者_如何学C 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?

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);

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.

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.

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.

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);
  }

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) + "...");
    }
}

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.

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);
     });