/*—————————————————
作者:阿辛(Xinple)
时间:2005-11-4 00:21
地点:http://xinple.org
————————————————-*/
今天晚上收到过眼的博客-行走在此间 的一封Email,问我怎样实现一个类似下面的效果:
我对于周杰伦的歌没有多少兴趣,只是图个新鲜,来吧, 荡下来很快的喔 。
2.一直很想看得杜妻疯的《黑社会》 终于出来了,经过广电总局的妙手 ,现在成了《龙城岁月》, 根本失去了原有的味道,还剪去了10多分钟的戏份 ,可想而知,这10多分钟是对咱们祖国的青少年存在严重的误导可能,对于咱们的精神文明建设会起到严重的阻碍 。广电总局英明! 不过要看的去bt荡下来吧,趁着现在bt还不是咱们这政权严打的对象…
他想textarea来实现,但是textarea的效果就是这样的:
发现不同了吗? 恩,使用textarea的话,html标签是不能工作的,因为textarea本来就是一个用来让你输入多行文本的表单,例如wordpress默认的日志撰写区域就是一个textarea,它可以直接输入任何html标签,不过可以使用属性readonly来让它不能写入文本。
例如
1 | |
那么怎样实现在类似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 | |
效果:
我对于周杰伦的歌没有多少兴趣,只是图个新鲜,来吧, 荡下来很快的喔 。
2.一直很想看得杜妻疯的《黑社会》 终于出来了,经过广电总局的妙手 ,现在成了《龙城岁月》, 根本失去了原有的味道,还剪去了10多分钟的戏份 ,可想而知,这10多分钟是对咱们祖国的青少年存在严重的误导可能,对于咱们的精神文明建设会起到严重的阻碍 。广电总局英明! 不过要看的去bt荡下来吧,趁着现在bt还不是咱们这政权严打的对象…
好了,到此,问题已经基本解决,那么,要让它变好看点,让自己写的东东更加让自己“幸福”,就要设置其他属性了,比如滚动条(scollbar),边框,字体,颜色等等。这些就要稍微了解一点html或者css了。
1 | |
效果:
我对于周杰伦的歌没有多少兴趣,只是图个新鲜,来吧, 荡下来很快的喔 。
2.一直很想看得杜妻疯的《黑社会》 终于出来了,经过广电总局的妙手 ,现在成了《龙城岁月》, 根本失去了原有的味道,还剪去了10多分钟的戏份 ,可想而知,这10多分钟是对咱们祖国的青少年存在严重的误导可能,对于咱们的精神文明建设会起到严重的阻碍 。广电总局英明! 不过要看的去bt荡下来吧,趁着现在bt还不是咱们这政权严打的对象…