wrap up html contents

Question

if an html contains say <div>1222222222222234c dssdsdf sdfsdfsdf</div>

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

Thanks.

Answer 1

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.

Answer 2

This should be what you want. More

Answer 3

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/

Answer 4

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

Answer 5

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.