Question

我在html页面中有很多字段，比如这个

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

我正在寻找可以执行以下操作的脚本：

检查内容长度是否大于某个数量（如300个字符）
如果是这种情况，请将其缩小以使其长度为300个字符并显示“展开”按钮，否则保持原样

显然它应该保持内容的内部html结构完整。

我确信已经完成了这样的事情，我想得到一些参考。

非常感谢

Nicola Montecchio

Answer 1

这就是我要找的东西： http://www.reindel.com/truncate/#examples 无论如何，多亏你们所有人的回答。祝你今天愉快尼古拉

Answer 2

您可能希望使用支持css选择器的框架，例如dojo或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);
       }
     }
);

代码没有经过测试，但是它在这个大方向上有所作为。

Answer 3

有一个位于here的jQuery插件，当被调用时，会自动切断不适合的文本并添加省略号。它还会重新计算容器的大小。

Answer 4

不是你问题的答案，但这里有一个很好的小函数我只能在一个单词的结尾处截断文本，而不是在x个字符之后盲目地截断文本。

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

基于<div>内容长度</div>的javascript内容压缩/扩展选项

4 个答案: