实现类似textarea这样可以滚动显示内容的方法

/*—————————————————
       作者：阿辛(Xinple)
       时间：2005-11-4 00:21
       地点：http://xinple.org
  ————————————————-*/

    今天晚上收到过眼的博客-行走在此间的一封Email，问我怎样实现一个类似下面的效果：

 

1.听周杰伦这孩子最新专辑的主打歌，已经几日了，原来是睡在旁边的室友一天到晚放的就是这歌，嘿嘿，是《 11月的肖邦》!咋10月就出来了? 香港有人bt被法院判了!美国下令关闭电驴服务， Cao!
我对于周杰伦的歌没有多少兴趣，只是图个新鲜，来吧， 荡下来很快的喔。

 

　　2.一直很想看得杜妻疯的《黑社会》终于出来了，经过广电总局的妙手，现在成了《龙城岁月》，根本失去了原有的味道，还剪去了10多分钟的戏份，可想而知，这10多分钟是对咱们祖国的青少年存在严重的误导可能，对于咱们的精神文明建设会起到严重的阻碍。广电总局英明!不过要看的去bt荡下来吧，趁着现在bt还不是咱们这政权严打的对象…

他想textarea来实现，但是textarea的效果就是这样的：
<br /> 1.听周杰伦这孩子最新专辑的主打歌，已经几日了，原来是睡在旁边的室友一天到晚放的就是这歌，嘿嘿，是《<strong>11月的肖邦》!咋10月就出来了?</strong><em>香港有人bt被法院判了!美国下令关闭电驴服务</em>，<strong>Cao!</strong><br /> 我对于周杰伦的歌没有多少兴趣，只是图个新鲜，来吧，<strong>荡下来很快的喔</strong>。 </p> <p>　　2.一直很想看得<strong>杜妻疯的《黑社会》</strong>终于出来了，经过<strong>广电总局的妙手</strong>，现在成了<strong>《龙城岁月》，</strong>根本失去了原有的味道，还剪去了<strong>10多分钟的戏份</strong>，可想而知，这10多分钟是<em>对咱们祖国的青少年存在严重的误导可能，对于咱们的精神文明建设会起到严重的阻碍</em>。<strong>广电总局英明!</strong>不过要看的去bt荡下来吧，<strong>趁着现在bt还不是咱们这政权严打的对象…</strong> </p> <p>

 

发现不同了吗？ 恩，使用textarea的话，HTML标签是不能工作的，因为textarea本来就是一个用来让你输入多行文本的表单，例如wordpress默认的日志撰写区域就是一个textarea，它可以直接输入任何HTML标签，不过可以使用属性readonly来让它不能写入文本。
例如

1. <textarea cols="2" rows="6" readonly></textarea>

此处无法像上面那样输入文本

那么怎样实现在类似textarea在指定区域内滚动显示多行文本呢？ 一个就是使用javascript，相信大家都用过那些“所见即所得”编辑器吧？其实他们大多就是使用JS来设置textarea的。可是现在问题是写JS比较麻烦，而且，textarea是用来输入数据的表单，而不是用来显示数据的。

比较好的解决方法就是使用div+CSS来搞定了。
CSS有个属性： overflow

语法：
overflow : visible | auto | hidden | scroll

 

参数：
visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 　不显示超过对象尺寸的内容
scroll : 　总是显示滚动条

说明：
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
设置textarea对象为hidden值将隐藏其滚动条。
对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。
自IE5开始，此属性在MAC平台上可用。

那么，开始提出的那种效果可以这样实现：

1. <div style="overflow: scroll; width: 382px; height: 160px;"> 
2. 1.听周杰伦这孩子最新专辑的主打歌，已经几日了，原来是睡在旁边的室友一天到晚放的就是这歌，嘿嘿，是《<strong>11月的肖邦》!咋10月就出来了?</strong><em>香港有人bt被法院判了!美国下令关闭电驴服务</em>，<strong>Cao!</strong>
3. 我对于周杰伦的歌没有多少兴趣，只是图个新鲜，来吧，<strong>荡下来很快的喔</strong>。
4.  
5. 2.一直很想看得<strong>杜妻疯的《黑社会》</strong>终于出来了，经过<strong>广电总局的妙手</strong>，现在成了<strong>《龙城岁月》，</strong>根本失去了原有的味道，还剪去了<strong>10多分钟的戏份</strong>，可想而知，这10多分钟是<em>对咱们祖国的青少年存在严重的误导可能，对于咱们的精神文明建设会起到严重的阻碍</em>。<strong>广电总局英明!</strong>不过要看的去bt荡下来吧，<strong>趁着现在bt还不是咱们这政权严打的对象...</strong> 
6. </div>

效果：

1.听周杰伦这孩子最新专辑的主打歌，已经几日了，原来是睡在旁边的室友一天到晚放的就是这歌，嘿嘿，是《 11月的肖邦》!咋10月就出来了? 香港有人bt被法院判了!美国下令关闭电驴服务， Cao!
我对于周杰伦的歌没有多少兴趣，只是图个新鲜，来吧， 荡下来很快的喔。

 

2.一直很想看得杜妻疯的《黑社会》终于出来了，经过广电总局的妙手，现在成了《龙城岁月》，根本失去了原有的味道，还剪去了10多分钟的戏份，可想而知，这10多分钟是对咱们祖国的青少年存在严重的误导可能，对于咱们的精神文明建设会起到严重的阻碍。广电总局英明!不过要看的去bt荡下来吧，趁着现在bt还不是咱们这政权严打的对象…

好了，到此，问题已经基本解决，那么，要让它变好看点，让自己写的东东更加让自己“幸福”，就要设置其他属性了，比如滚动条(scollbar)，边框，字体，颜色等等。这些就要稍微了解一点HTML或者CSS了。

1. <div style="
2. overflow: auto; width: 400px; height: 180px;
3. font: 12px Verdana;
4. color:#000;
5. background-color:#FFF;
6. border: 1px dotted #999;
7. scrollbar-face-color: #CBDDF1;
8. scrollbar-highlight-color: #547CBB;
9. scrollbar-shadow-color: #547CBB;
10. scrollbar-3dlight-color: #ffffff;
11. scrollbar-arrow-color:  #547CBB;
12. scrollbar-track-color: #FFFFFF;
13. scrollbar-darkshadow-color: #FFFFFF;"> 
14. 1.听周杰伦这孩子最新专辑的主打歌，已经几日了，原来是睡在旁边的室友一天到晚放的就是这歌，嘿嘿，是《<strong>11月的肖邦》!咋10月就出来了?</strong><em>香港有人bt被法院判了!美国下令关闭电驴服务</em>，<strong>Cao!</strong>
15. 我对于周杰伦的歌没有多少兴趣，只是图个新鲜，来吧，<strong>荡下来很快的喔</strong>。
16.  
17. 2.一直很想看得<strong>杜妻疯的《黑社会》</strong>终于出来了，经过<strong>广电总局的妙手</strong>，现在成了<strong>《龙城岁月》，</strong>根本失去了原有的味道，还剪去了<strong>10多分钟的戏份</strong>，可想而知，这10多分钟是<em>对咱们祖国的青少年存在严重的误导可能，对于咱们的精神文明建设会起到严重的阻碍</em>。<strong>广电总局英明!</strong>不过要看的去bt荡下来吧，<strong>趁着现在bt还不是咱们这政权严打的对象...</strong> 
18. </div>

效果：

1.听周杰伦这孩子最新专辑的主打歌，已经几日了，原来是睡在旁边的室友一天到晚放的就是这歌，嘿嘿，是《 11月的肖邦》!咋10月就出来了? 香港有人bt被法院判了!美国下令关闭电驴服务， Cao!
我对于周杰伦的歌没有多少兴趣，只是图个新鲜，来吧， 荡下来很快的喔。

 

2.一直很想看得杜妻疯的《黑社会》终于出来了，经过广电总局的妙手，现在成了《龙城岁月》，根本失去了原有的味道，还剪去了10多分钟的戏份，可想而知，这10多分钟是对咱们祖国的青少年存在严重的误导可能，对于咱们的精神文明建设会起到严重的阻碍。广电总局英明!不过要看的去bt荡下来吧，趁着现在bt还不是咱们这政权严打的对象…