我才12岁 ?

很久之前，写过一篇文字，是如何去掉 pre 标签内的垂直滚动条，这两天在使用的时候发现其中存在很大的缺点，就是当代码很长的时候，需要将页面往下拉才能拉动水平滚动条看右边的文字，反复的拉滚动条，挺烦人的。所以，要想办法去掉所有的滚动条，并促使代码在 pre 内换行。

思想其实很简单，就是参照上篇文字的做法，对 pre 标签内的代码进行正则替换，然后定义 pre 里的这些标签的 white-space 属性为 normal 即可实现自动换行，并去掉水平和垂直的滚动条。你也许会说，如果我将 pre 的 white-space 属性为 normal 不可以吗？你可以自己试下，如果这样的话 pre 就和一个正常的标签一样了，那么所有的代码都会挤到一起啦。

下边是代码，欢迎各位指正：

JavaScript 代码：

function preFormat() {
    var pres = document.getElementsByTagName("pre");
    if(pres.length > 0) {
        for(var i=0; i<pres.length; i++) {
            var presText = pres[i].innerHTML;
            presText = presText.replace(/\r/g,"</li>");
            presText = presText.replace(/\n/g,"<li>");
            presText = presText.replace(/<li>\s<\/li>/gi,"\n");
            var testFirstLetter = presText.substring(0,5);
            if(testFirstLetter.toString() == "</li>") {
                presText = presText.replace(/<\/li>(\n)/,"");
            } else if(testFirstLetter.toString().charAt(0) != "<") {
                presText = "<li>" + presText;
            } else {
                alert("发现bug，请找nanzhi。");
                return false;
            }
            var testLastLetter = presText.substring(presText.length - 4);
            if(testLastLetter.toString() == "<li>") {
                presText += "</li>";
                presText = presText.replace(/<li><\/li>/,"");
            } else if(testLastLetter.toString().charAt(0) != "/") {
                presText += "</li>";
            }
            presText = presText.replace(/<li>\s*<\/li>/gi,"\n");
            presText = "<ol>" + presText + "</ol>";
            pres[i].innerHTML = presText;
            var lis = pres[i].getElementsByTagName("li");
            for(var j=0; j<lis.length; j++) {
                if( j%2 == 0) lis[j].className = "sec";
            }
        }
    }
}

CSS 代码：

pre { width:400px; border:1px solid #0066FF; overflow:hidden; padding:5px;}
pre ol li { white-space:normal;}

演示地址：http://www.12sui.cn/test/15

标签： pre, 滚动条

这篇文章发布于 2008年11月23日，星期日，17:28，归类于 编码。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。