HTML pre 标签一般用来在网页上面显示代码,被包围在pre 元素中的文本通常会保留空格和换行符,但笔者最近在写文章时发现当标签里面写代码的时候如果没有手动换行,它也会给你按你写的显示,而不会自动换行,如果你嵌套的DIV不够宽的话就会隐藏掉超出长度的代码。
html pre标签代码内容过长自动换行的方法
可以使用overflow:auto; (当代码超出容器边界的时候,显示滚动框), 但这个方法有一定的BUG,有些浏览器并不支持显示滚动条,从而导致内容不可见。
完美的实现方法:
- pre{
- white-space:pre-wrap;/*css-3*/
- white-space:-moz-pre-wrap;/*Mozilla,since1999*/
- white-space:-pre-wrap;/*Opera4-6*/
- white-space:-o-pre-wrap;/*Opera7*/
- word-wrap:break-word;/*InternetExplorer5.5+*/}
这个CSS样式可以让pre标签内的文本自动换行,笔者在自己有的浏览器上都测试了一下,全部支持,IE6,IE7, IE8, Firefox, Opera, Safari和Chrome。