jQuery在50個字符後面添加一個<br>到文本

我想在html超過50個字符後使用jQuery向我的html添加「<br />」標記。jQuery在50個字符後面添加一個<br>到文本

我的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自動換行。

感謝

來源

2014-07-25 Alex Zahir

你可以通過jQuery設置CSS屬性嗎？什麼樣的限制是「沒有CSS」？ – rvighne

你沒有對htmlfoo做任何事情。至少改變$（this）.html（str）;到$（this）.html（htmlfoo）; –

好吧，具體我不能使用CSS寬度，因爲我已經使用了一個表內沒有固定寬度的表。但如果你需要包裹50個字符後使用CSS這完全好:) –

這是基於現有的代碼到的jsfiddle的鏈接。

Link

的代碼片段是如下這是指在each的元件，以防止與具有相同類中的其他元素<td>搞亂

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

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

注意var str = $(this).html();。

來源

2014-07-25 04:49:48 khakiout

這是非常好的，但如果您的內容中有一個'＆nbsp'，它也將被切斷，它會顯示在您的網站。 :)你怎麼能阻止呢？ – user3771102

這裏是小提琴

Fiddle

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

來源

2014-07-25 04:49:32 Arunkumar

我想'var str = $（'td'+'.ccol1'）。html（）;'應該是'var str = $（this）.html（）;'以防止其他元素的內容與同一個類相混淆。:) – khakiout

這是偉大的@Neophyte，但像卡其說... –

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

來源

2014-07-25 04:49:34 hari

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

來源

2014-07-25 04:51:12

試試看看這個代碼。

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

希望這是你想要的。

來源

2014-07-25 04:56:05

jQuery在50個字符後面添加一個<br>到文本

回答

相關問題