南芝 – 我才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，归类于 CSS, JavaScript。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。