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