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

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

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

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

Code
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);
}

测试文本

测试了

测试侧试试了

测试文本

测试了

测试侧试试了

测试

测试文本

测试了

测试侧试试了

测试文本

测试了

测试侧试试了

如上面的测试代码效果

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