JavaScript內容緊湊型/擴展選項

Question

我有一個HTML頁面等諸多領域，因爲這

<div class="note" id="notexyz23"> 
    very long content 
</div> 

我正在尋找一個腳本，可以做到以下幾點：

• 檢查內容長度是否大於某個數量（如300個字符）
• 如果是這種情況，請將其縮小以使其長度爲300個字符並顯示「展開」按鈕，否則將其保留爲

顯然它應該保持內容的內部html結構完整。

我相信這樣的事情已經完成了，我想得到一些參考。

非常感謝

尼古拉·蒙太奇

Answer 1

你可能想使用支持CSS選擇器類似道場或jQuery的框架

這樣認爲：

dojo.query(".note").foreach(
    function(zeDiv){ 
     if(zeDiv.innerHTML.length > 300){ 
      var content = zeDiv.innerHTML; 
      var summary = content.subtring(0,300); 
      zeDiv.innerHTML = summary; 
      var hiddenContent = document.createElement("input"); 
      hiddenContent.type = "hidden"; 
      hiddenContent.value = content; 
      zeDiv.appendChild(hiddenContent); 
      var expandButton = document.createElement("input"); 
      expandButton.type = "button"; 
      expandButton.onClick = function(){ 
      this.innerHTML = dojo.query("[type=hidden]")[0].value; 
      } 
      zeDiv.appendChild(expandButton); 
     } 
    } 
); 

代碼ISN沒有經過測試，但它在這個大方向上有所作爲。

Answer 2

有一個位於here的jQuery插件，它在調用時會自動切斷不適合的文本並添加省略號。它還重新計算容器是否調整大小。

Answer 3

不是你的問題的答案，但這裏有一個很好的小函數，我只能在一個單詞的末尾截斷文本，而不是在x之後盲目地截取字符。

function truncate(text, length) { 
    if (text.length > length) { 
     var re = new RegExp('^(.{1,' +length+ '})(\\s.*|$)'); 
     text = text.replace(re, '$1...'); 
    } 
    return text; 
} 

Answer 4

這就是我一直在尋找： http://www.reindel.com/truncate/#examples 無論如何，感謝各位的盛情答案。 祝您有個愉快的日子 Nicola