截斷使用truncate.js

多HTML文本我發現了一個精彩的HTML截斷庫，truncate.js，它處理的我的需求約99％。但我有一個我正面臨的嘮叨問題。我有一個要求'顯示更多'的要求放置在一系列帖子的特定行數的末尾......這個圖書館可以實現一段文字......但是當涉及到多行文本顯示更多的定位不當。截斷使用truncate.js

我已經做了plunker來證明這個問題。我想要的只是能夠在多行文本的相同位置放置多個文本，就像在同一頁面上放置文本塊一樣。

我的第一次嘗試是在truncateNestedNodeEnd添加上一個（）功能

if ($clipNode.length) { 
     if ($.inArray(element.tagName.toLowerCase(), BLOCK_TAGS) >= 0) { 
      // Certain elements like <li> should not be appended to. 
      $element.after($clipNode); 
     } 
     else 
      { 
      //edited this line to add prev() 
      //$element.append($clipNode) 
      $element.prev().append($clipNode); 

      } 
     }`

這給了我什麼，我想要多行文字，但後來它打破了原有的功能如圖所示的文本塊。我如何使這個功能適用於這兩種情況。當這兩個帖子坐在同一頁面上時，我仍然想要顯示更多信息以顯示在黃色部分。

來源

2017-08-29 Abide Masaraure

你爲什麼要使用一個無用的JS來做什麼你可以用CSS來實現？你還可以在沒有任何圖書館的情況下做 –

@MarcoSalerno我不認爲在這方面使用js是沒用的。 CSS只會達不到我所需要的。。我們最初使用css，但它不符合以下要求：「截斷文本應該在動態文本的最後一行之後立即顯示在段落或多行文本中」。隨着CSS，我們設法將「顯示更多」絕對定位在正確的位置......這很好，但這不是我們想要的......「顯示更多」應根據其長度附加在文本旁邊。 –

的問題是truncate.js遞歸放$ clipNode在不同的容器，並刪除他們，如果截斷標誌是不正確的。您的方法存在的問題是您添加到元素的上一個節點，在列出的項目中爲true，但如果沒有以前的項目（如在文本塊的情況下）則爲true。這就是爲什麼在你的方法中沒有在文本塊中插入任何東西。我已經改變了代碼，並在函數的末尾添加了另一個append語句，以便一旦完成追加$ clipNode，它會將$ clipNode容器移動到前一個元素（如果有）。

if ($clipNode.length) { 
 
    if ($.inArray(element.tagName.toLowerCase(), BLOCK_TAGS) >= 0) { 
 
    // Certain elements like <li> should not be appended to. 
 
    $element.after($clipNode); 
 
    } else { 
 
    //edited this line to add prev() 
 
    //$element.append($clipNode) 
 
    $element.append($clipNode); 
 

 
    } 
 
} 
 

 
if ($rootNode.height() > options.maxHeight) { 
 
    if (child.nodeType === 3) { // text node 
 
    truncated = truncateTextContent($child, $rootNode, 
 
     $clipNode, options); 
 
    } else { 
 

 
    truncated = truncateNestedNode($child, $rootNode, $clipNode, 
 
     options); 
 
    } 
 
} 
 

 
if (!truncated && $clipNode.length) { 
 
    $clipNode.remove(); 
 
} else { 
 
    $element.prev().append($clipNode); 
 
}

而且問題似乎已經解決了

enter image description here

請同時參閱更新的代碼在Plunker

來源

2017-09-08 20:05:44

好東西。它像一個魅力 –

我不知道我理解你的目標，但我認爲你正試圖獲得的間距是用「@Abide Masaraure」文本中的重複span標籤更加一致。

如果是這樣的話，我建議研究使用Chrome的檢查功能或其他瀏覽器類似的功能生成的HTML。

奇數間隔似乎因爲不間斷空格字符的發生（& NBSP）剛剛過去的跨度標記之前被插入。

下面是一些圖像，我從你的plunker示例中展示出來。

不知何故，span標記正在生成，但沒有任何內容，但非空白字符。

難道你截斷邏輯莫名其妙允許空字符串或空格被轉換成非斷空格字符，這些span標記？這可能是您的顯示問題的根本原因。我希望這有幫助。

來源

2017-09-01 19:56:31 JohnH

您正在嘗試獲取截斷以縮短已經很短的文本塊。提及線不足以中斷，因此在換行符中斷，並且在到達換行符時沒有任何內容要截斷。如果您刪除強制短行的div，則內容到達行末並按照您的預期換行。當您在前一個元素之前追加「showmore」時，如果只有一個元素，則它不起作用，如第二段的情況。 @JohnH提到的額外空格使格式變得難看，但不會導致中斷。

來源

2017-09-08 16:49:46 biznetix

截斷使用truncate.js

回答

相關問題