0

I want to add a "<br />" tag to my html using jQuery after the html exceeds 50 characters.

My HTML:

<table>
   <tr>
      <td class="ccol1">This is the HTML if its characters exceed 50 characters it should go to next line</td>
   </tr>
</table>


I attempted to do this using results from google but it doesnt seem to work.

            $( '.ccol1' ).each( function () {
                var str = $('td' + '.ccol1');

                var htmlfoo = str.match(/.{1,50}/g).join("<br/>");
                $( this ).html( str );  
            });

Also, I have to do this using jQuery alone so please dont suggest using CSS word-wrap.

Thanks

Alex Zahir
  • 949
  • 7
  • 19
  • 50
  • 1
    Can you set CSS properties through jQuery then? What kind of restriction is "no CSS"? – rvighne Jul 25 '14 at 04:37
  • 2
    You're not doing anything with htmlfoo. At least change $( this ).html( str ); to $( this ).html( htmlfoo ); – Andrew Ngo Jul 25 '14 at 04:38
  • okay to be specific i cant use CSS width as i have used a table within a table without fixed width. But if you need to wrap after 50 characters using CSS thats completely fine :) – Alex Zahir Jul 25 '14 at 04:39
  • did you tried http://stackoverflow.com/questions/7068653/jquery-or-javascript-to-add-one-line-break-br-after-x-amount-of-characters-i – G.L.P Jul 25 '14 at 04:41
  • @AndrewNgo I think we need some code to make var str and var htmlfoo work together in such a way that the html is taken from var str and the br is added using htmlfoo and the result is shown – Alex Zahir Jul 25 '14 at 04:42
  • 1
    Yes, but what Andrew is saying is that you're taking the original text in the "str" variable, correctly adding the linebreaks in the "htmlfoo" variable, and then placing the original "str" variable back into the $(this).html(str); statement. You need to change the second to last line of code to $(this).html(htmlfoo); – Michael Jul 25 '14 at 04:46
  • @Michael doing that gives me an error "str.match" is not a function – Alex Zahir Jul 25 '14 at 04:49
  • Is the particular string you're trying to match over 50 characters? Which line gives the error? The "var htmlfoo" line or the "$(this).html()" line? – Michael Jul 25 '14 at 04:52
  • @AlexZahir `str` should be `$(this).html()` to work – khakiout Jul 25 '14 at 04:52

5 Answers5

2

Here is a link to a JSFiddle based on your existing code.

Link

The code snippet is as follows

$('.ccol1').each(function () {
     var str = $(this).html();

     var htmlfoo = str.match(/.{1,50}/g).join("<br/>");
     $(this).html(htmlfoo);
 });

Note the var str = $(this).html(); which refers to the element in the each to prevent messing up with other <td> elements with the same class.

khakiout
  • 2,372
  • 25
  • 32
  • This is very good but what if there is an `&nbsp` in your content it will also get cut off and it will be shown in your website. :) How can you prevent that? – user3771102 May 26 '16 at 09:27
1

Here is the Fiddle

Fiddle

 $( '.ccol1' ).each( function () {
            var str = $('td' + '.ccol1').html();
            var htmlfoo = str.match(/.{1,50}/g).join("<br/>");
            $( this ).html( htmlfoo );  
        });
Arunkumar
  • 5,150
  • 4
  • 28
  • 40
  • I think `var str = $('td' + '.ccol1').html();` should be `var str = $(this).html();` to prevent messing the contents of other elements with the same class. :) – khakiout Jul 25 '14 at 04:52
0

Demo ,use css width: 300px; word-wrap: break-word;

hari
  • 1,874
  • 1
  • 16
  • 10
0
$( '.ccol1' ).each( function () {
      var str = $(this).text();
      for(var i=1; i<=str.length/50; i++)
      {   
          str = [str.slice(0, (50*i)), '<br/>', str.slice(50*i)].join('');
      }                
      $(this).html(str);  
});
Ashok Damani
  • 3,896
  • 4
  • 30
  • 48
0

Try this code.

<table>
<tr>
<td class="ccol1">This is the HTML if its characters exceed 50 characters it should go  to next line</td>
</tr>
</table>
<script src="jquery.js"></script>
<script>

$(function(){
text = $(".ccol1").html();
if(text.length > 50){
var text1 = text.substr(0,49);
var text2 = text.substr(50);
$(".ccol1").html(text1+"<br>");
$(".ccol1").append(text2);
}
});
</script>

Hope this is what you wanted.

Snehal Nagdeote
  • 37
  • 4