How to wrap up HTML contents?

If an HTML contains say:

<div>1222222222222开发者_如何学C234c dssdsdf sdfsdfsdf</div>

How to wrap up the contents limiting to 10 characters and maybe after that we show (12222222..) two dots.

Using jQuery we can do it like this

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

You can use

text-overflow: ellipsis

But for a cross browser solution you will have to split the string and then append . after your desired length.

Since text-overflow: ellipsis is only "Supported by IE7-, Safari and Konqueror" - you'll probably need a javascript solution:

This is a well written one:

http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/

This should be what you want. More

aaaaaaaaaa<wbr/>cccccccccc

Thought not on the same lines but is one nice thing to know, this wraps the text if and only if the text is not getting fit in space. Handy for using with the messages.