教学之友,学习之友。

站长教学网

html pre标签如何自动换或隐藏过多内容

时间:2012-03-25 20:22来源:未知 作者:ken 点击:

HTML pre 标签一般用来在网页上面显示代码,被包围在pre 元素中的文本通常会保留空格和换行符,但笔者最近在写文章时发现当标签里面写代码的时候如果没有手动换行,它也会给你按你写的显示,而不会自动换行,如果你嵌套的DIV不够宽的话就会隐藏掉超出长度的代码。

html pre标签代码内容过长自动换行的方法

可以使用overflow:auto; (当代码超出容器边界的时候,显示滚动框), 但这个方法有一定的BUG,有些浏览器并不支持显示滚动条,从而导致内容不可见。
完美的实现方法:

  1. pre{   
  2. white-space:pre-wrap;/*css-3*/   
  3. white-space:-moz-pre-wrap;/*Mozilla,since1999*/   
  4. white-space:-pre-wrap;/*Opera4-6*/   
  5. white-space:-o-pre-wrap;/*Opera7*/   
  6. word-wrap:break-word;/*InternetExplorer5.5+*/}   

这个CSS样式可以让pre标签内的文本自动换行,笔者在自己有的浏览器上都测试了一下,全部支持,IE6,IE7, IE8, Firefox, Opera, Safari和Chrome。

 

(责任编辑:ken)
TAG标签: html pre
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
注册登录:不允许匿名留言,登录后留言无需输入验证码。
栏目列表
最新内容