極限字符在div中顯示而不會丟失格式

我發現了一個限制字符在div中的代碼，但它不工作時，我的字符串格式化爲HTML。極限字符在div中顯示而不會丟失格式

var myDiv = $('.credits'); 
myDiv.text(myDiv.text().substring(0,162));

我想限制div中的字符，但不會丟失格式。我可以使用PHP，JavaScript或jQuery。

感謝您的幫助提前。 myDiv的

HTML結構：

<p>this is my test <b>hello</b> <i>world</i></p>

來源

2014-02-07 Vivek Modi

提供的 'myDiv' –

HTML結構假設你的「格式化」是指一個DOM樹，那麼你必須解析整個樹來維護格式。現在看看這個頁面或者任何頁面，你或者其他人如何在不丟失格式的情況下修剪文本？如果沒有人能做到，那麼沒人能回答這個問題。 – Johnny

這是myDiv的HTML結構：

這是我的測試hello world

–

試試這個

<body> 
<div id="test_div"> 
<h1>TITRE</h1> 
<p><strong>Texte en gras</strong><br /> 
<em>Texte en italique</em><i> texte avec balise i</i> <span>texte normale </span><strong> autre gras</strong></p> 
</div> 
<script> 
$(function(){ 
    var nb_limit=5 ,nb_all_charac=0,clean_all=false; 
    var fonc_clean_balise=function($v_element,maxi_chara){ 
     if($v_element.children().length) 
      $v_element.children().each(function(index, element) { 
       var $child=$(element); 
       fonc_clean_balise($child,maxi_chara); 
       maxi_chara=(maxi_chara-$child.text().length); 
       maxi_chara=(maxi_chara<0)?0:maxi_chara; 

      }); 
     else{ 
      $v_element.text($v_element.text().substring(0,maxi_chara)); 
     } 
    }; 
    $('#test_div').children().each(function(index, element) { 
     $element=$(element); 
     if(!clean_all){ 
      nb_all_charac+=$element.text().length; 
      if(nb_all_charac>nb_limit){ 
       clean_all=true; 
       var lower_limit=nb_limit-nb_all_charac; 
       nb_limit=(lower_limit<0)?nb_limit:lower_limit; 
       fonc_clean_balise($element,nb_limit); 
      } 
     }else{ 
      fonc_clean_balise($element,0); 
     } 
    }); 
}); 
</script> 
</body>

來源

2014-02-07 10:06:53

嗨，謝謝你的代碼。它的偉大工程，但我的HTML是這樣的：

這是我的測試你好世界

–

如果文本沒有格式化，把它放在一個跨度例如：

這是我的測試打招呼世界

–

極限字符在div中顯示而不會丟失格式

回答

相關問題