在需要的时候用js收缩文本高度

在显示图书目录的时候，往往拉的页面很长，用户一眼看不到边，这样用户体验不好，所以经常可以看看“继续阅读”的链接。

它是如何实现的呢，其实就是用js检测块的高度，如果高度超过一定数，则修改文本块的高度，并设置overflow:hidden，然后再创建一个继续阅读的连接放在下面用来展开所有内容。

js代码如下，代码在ie和firefox下测试通过：

function doShrink(oshrink,maxHeight){
    if(oshrink){
        var oH = (oshrink.clientHeight||oshrink.offsetHeight);
        if(oH>maxHeight){
            var link = document.createElement("a");
            var div = document.createElement("div");
            div.className = "smallA";
            div.innerHTML = "…………<br />"
            text = document.createTextNode("[点击查看更多内容]");
            link.href = "javascript:void(0)";
            link.onclick = function(e) { shrinkShow(this); }
            link.appendChild(text);
            div.appendChild(link);
            var onext = oshrink.nextSibling;
            if(onext)
                oshrink.parentNode.insertBefore(div,onext);
            else
                oshrink.parentNode.appendChild(div);
            //过滤较长的内容
            oshrink.srcHeight = oH;
            oshrink.style.cssText ="overflow-y: hidden; max-height: "+maxHeight+"px; *_height: "+maxHeight+"px; ";
        }
    }
}
function shrinkShow(obj) {
    var omore = obj.parentNode;
    var ohide = omore.previousSibling;
    ohide.style.height  = ohide.srcHeight + 'px';
    ohide.style.maxHeight  = ohide.srcHeight + 'px';
    remove(omore);
}

测试文本

测试了

测试侧试试了

测试文本

测试了

测试侧试试了

测试

测试文本

测试了

测试侧试试了

测试文本

测试了

测试侧试试了

如上面的测试代码效果

在这个地址你可以看到更形象的测试效果图