複雑なHTMLを行単位で切り捨てる方法

Question

特定の行数に達した後にさらに多くのリンクを表示できるように、複雑なhtmlを行単位で切り詰めようとしています。複雑なhtmlを切り捨てるときには短くなりますが、行によって切り捨てられたtrunk8.jsという素晴らしいライブラリが見つかりました。だから私の特定のケースでは、私は正常に複雑なhtmlタグを残して別の切り捨て関数を使用して複雑なを処理することができるように、truncate関数をオーバーライドします。切り捨てはHTMLで素晴らしい仕事だろうが、私は7行に切り捨てしようとしています上の画像に見られるようにライン

の数に基づいて、より多くのショーを置くために場所を正確に計算する方法にこだわっていますユーザーの入力に黄色で示された空白が含まれている場合、空白を考慮していないため計算が間違っています。私の最初の考え方は、各行の黄色のスペースの長さを計算して文字に変換することができれば、最大の文字数にこのオフセットを追加することができますより多くのリンク。これはこの問題に対する最善のアプローチですか、そうでなければ私の人生を楽にするための提案です。

これは私が今まで試したことのplunkerであり、trunk8.jsのtruncateHTML（）関数でスタックされています。ここでは、文字列の最大長に基づいて切り捨てています。

Answer 1

ユーレカ！いくつかのGoogle検索と重いデバッグのスプリントの後、私は自分のニーズに合わせてtruncatedNestednode（）関数をカスタマイズしたライブラリtruncate.jsを見つけました。

element.appendChild(child); 
     /** Customized--here **/ 
     var clonedNode = {}; 
     if ($clipNode.length) { 
      if ($.inArray(element.tagName.toLowerCase(), BLOCK_TAGS) >= 0) { 
       // Certain elements like <li> should not be appended to. 
       $element.after($clipNode); 
      } 
      else 
      { //Removed the commented line to put showmore next to the last line of text 
       $element.prev().append($clipNode); 
       //$element.append($clipNode); 

       } 
     } 

誰かが過去にこの問題に直面した場合、私は私の改訂plunker here