截斷可能包含或不包含HTML元素的段落文本的最快捷方式是什麼？

我需要截斷可能包含或不包含HTML標籤的段落文本。我正在尋找最直接的jQuery或香草JavaScript做到這一點的最有效的方法。你可以看到這裏的問題：http://jsfiddle.net/4BzpY/3/截斷可能包含或不包含HTML元素的段落文本的最快捷方式是什麼？

var text = "This <a href=\"\">is</a> some text with a link"; 

var shortText = jQuery.trim(title).substring(0, 10).split(" ").slice(0, -1).join(" ") + "..."; 

alert(shortText);

截斷的文本將在可動態擴展顯示所有內容的段落元素。在這種情況下，我不想去除HTML標籤，然後只在完全展開時才顯示它們。 HTML應保持原樣處於摺疊狀態和展開狀態。對於這種情況

來源

2013-07-03 bjork24

是不是還好，如果HTML被刪除？ – Corion

沒有，因爲當段落展開 – bjork24

那就需要在那裏你必須的jsfiddle錯誤。更改'標題'爲'文字' – Dharman

一種可能是暫時轉換數據被截斷的文本。

發送HTML的可更換元件，然後提取文本：

This <a href=\"\">is</a> some text with a link變得This is some text with a link，然後可以被安全地截斷。

如果您需要再次展開於原文，只是在它保留副本的HTML依舊。

下面是一個例子：http://jsfiddle.net/B2AZA/

來源

2013-07-03 21:36:14 Corion

正如我在編輯中提到的，我添加到問題中，我需要在摺疊和展開版本中保留相同的HTML。 – bjork24

如果這是在頁面上展示，一個更合適的方法可能是使用CSS。由於HTML：

<span class="truncated">this is truncated text</span>

和CSS：

.truncated { 
     overflow: hidden; 
     display: block; 
     width: 50px; 
     white-space: nowrap; 
     text-overflow: ellipsis; 
    }

這將顯示類似於：

this is...

然後，您可以使用JavaScript在需要時去除的CSS類。示例實現：http://jsfiddle.net/a8QK4/

來源

2013-07-03 21:39:18

僅適用於單行文本，並且不適用於Firefox。 – bjork24

如果它切斷了複雜的HTML標記的中間狀態，它會如何工作？ – Corion

@Corion它是一種視覺效果，所以它會停止給定寬度的內容並追加省略號 - 不管當時的格式如何。 –

我想它使用正則表達式。這裏找到了例子：這裏https://stackoverflow.com/a/7552371/142486

var text = $('#my-text'); 
var maxWords = 25; 
var words = text.html().match(/<\s*(\w+\b)(?:(?!<\s*\/\s*\1\b)[\s\S])*<\s*\/\s*\1\s*>|\S+/g); 
text.html(words.slice(0, maxWords).join(" ") + " ...");

演示 - http://jsfiddle.net/3Yjm8/

我會在純粹的HTML只需添加的元素與data()，然後更換它，當盒子被擴大。

來源

2013-07-03 22:08:07 bjork24

您似乎回答了您最初詢問的問題。另外，如果單詞由單獨的標籤包裝，您的解決方案只能正確計數單詞的數量;把一組跨度放在一組中，並將該跨度視爲一個單詞。 –

當你有類似中間表的東西時，這仍然會中斷：（ – Corion

Adrian是正確的，任何嵌套在其他元素中的元素都不會被計數，例如'ul'或'ol'列出的'li's不會是計數不幸。 – Buts

截斷可能包含或不包含HTML元素的段落文本的最快捷方式是什麼？

回答

相關問題