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

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

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

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

1.function doShrink(oshrink,maxHeight){
2.    if(oshrink){
3.        var oH = (oshrink.clientHeight||oshrink.offsetHeight);
4.        if(oH>maxHeight){
5.            var link = document.createElement("a");
6.            var div = document.createElement("div");
7.            div.className = "smallA";
8.            div.innerHTML = "…………<br />"
9.            text = document.createTextNode("[点击查看更多内容]");
10.            link.href = "javascript:void(0)";
11.            link.onclick = function(e) { shrinkShow(this); }
12.            link.appendChild(text);
13.            div.appendChild(link);
14.            var onext = oshrink.nextSibling;
15.            if(onext)
16.                oshrink.parentNode.insertBefore(div,onext);
17.            else
18.                oshrink.parentNode.appendChild(div);
19.            //过滤较长的内容
20.            oshrink.srcHeight = oH;
21.            oshrink.style.cssText ="overflow-y: hidden; max-height: "+maxHeight+"px; *_height: "+maxHeight+"px; ";
22.        }
23.    }
24.}
25.function shrinkShow(obj) {
26.    var omore = obj.parentNode;
27.    var ohide = omore.previousSibling;
28.    ohide.style.height  = ohide.srcHeight + 'px';
29.    ohide.style.maxHeight  = ohide.srcHeight + 'px';
30.    remove(omore);
31.}

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