如何按行截斷複雜的html

我想按行截斷複雜的html，以便能夠在達到一定數量的行後顯示更多鏈接。我發現了一個很棒的庫trunk8.js，它被截斷了......但如果在截斷複雜的html的時候不夠用的話。因此，對於我的特殊情況，我會覆蓋truncate函數，以便我可以處理複雜的使用另一個截斷函數，它可以完整地保留複雜的html標記。截斷將工作的偉大與HTML，但我堅持瞭如何精確地計算出在哪裏把顯示更多更是以線如何按行截斷複雜的html

的數量作爲圖像中看到上面我試圖截斷7行但是如果用戶輸入包含以黃色顯示的空格，我的計算就會出錯，因爲我沒有考慮到空格。我最初的想法是，如果我可以計算每行的黃色空格的長度並將其轉換爲字符，我可以將此偏移量添加到最大字符數，然後我可以知道應該在哪裏放大約節目更多鏈接。這是解決這個問題的最好方法嗎？如果不是的話，任何建議都可以讓我的生活更輕鬆。

這是我到目前爲止嘗試過的一個plunker，而我卡在我的truncateHTML（）函數中的trunk8.js中，現在我只根據字符串的最大長度截斷。

來源

2017-08-21 Abide Masaraure

是否有任何理由你不設置div的大小，並有溢出：隱藏，然後「顯示更多」只是絕對位於右下角？你也可以檢測到div是否溢出，所以你可以隱藏/顯示「顯示更多」 – Keith

感謝您的輸入。最初我們是這樣做的，但產品團隊要求顯示更多鏈接必須是動態的，並且與文本相鄰，取決於文本的長度或特定行數。所以我們遇到了問題，爲不同的用戶輸入更正確地定位節目 –

尤里卡！經過幾次谷歌搜索和大量調試衝刺後，我偶然發現了一個庫truncate.js，我爲我的需要定製了truncatedNestednode（）函數。

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

來源

2017-08-25 17:03:55

如何按行截斷複雜的html

回答

相關問題