Question

我想添加＆＃34; <br />＆＃34;在html超过50个字符后使用jQuery标记到我的html。

我的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>

我尝试使用谷歌的结果来做到这一点，但似乎没有用。

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

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

另外，我必须单独使用jQuery这样做，所以请不要建议使用CSS自动换行。

由于

Answer 1

以下是基于现有代码的JSFiddle链接。

Link

代码段如下

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

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

请注意var str = $(this).html();引用each中的元素，以防止与同一类的其他<td>元素混淆。

Answer 2

这是小提琴

Fiddle

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

Answer 3

Demo，请使用css width: 300px; word-wrap: break-word;

Answer 4

$( '.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);  
});

Answer 5

试试这段代码。

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

希望这是你想要的。

jQuery在50个字符后添加一个文本

5 个答案: