转载：pre标签解决自动换行问题

原文链接：http://www.ipmtea.net/css_ie_firefox/201007/18_134.html

 

先看看pre的定义 HTML pre 标签 定义和用法 pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 pre 标签的一个常见应用就是用来表

 

先看看pre的定义

HTML <pre> 标签

定义和用法

 

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码

 

在 HTML 4.01 中，pre 元素的 "width" 属性是不被赞成使用的。

在 XHTML 1.0 Strict DTD 中，pre 元素的 "width" 属性是不被支持的。

 

 给pre添加一个overflow的样式， 

1. overflow:auto; 

在IE7下测试，这时，会出现滚动条，auto值的意思是当超出宽度时才出现滚动条，如果设置overflow:scroll，即使没有超出宽度也有滚动条，
有趣的是：对于pre标签，如果你想只设置垂直方向滚动而不设置水平方向是不行的，即：

1. overflow-y: auto | scroll; 

即使没有设置overflow-x，但是如果内容超出宽度，依然会出现滚动条，即当设置overflow-y:auto|scroll的时候，
overflow-x默认为：auto


white-space的问题：

<pre>标签可以理解为默认CSS就是{white-space:pre}

 在IE下，可以设置{word-wrap:break-word }
word-wrap：设置或检索当当前行超过指定容器的边界时是否断开转行。
word-wrap:break-word：内容将在边界内换行。如果需要，词内换行（word-break）也行发生。

 遗憾的是，貌似firefox不支持此属性。

  

---

浏览器默认是强制不换行输出 pre 里的内容。这样的话，代码一长就出现了撑到页面外部的样子。当然，你可以在编辑文章的时候手动换行，不过我觉得很麻烦，而且我是个懒人
 
 

1. pre {   
2. whitewhite-space: pre-wrap; /* css-3 */   
3. whitewhite-space: -moz-pre-wrap; /* Mozilla, since 1999 */   
4. whitewhite-space: -pre-wrap; /* Opera 4-6 */   
5. whitewhite-space: -o-pre-wrap; /* Opera 7 */   
6. word-wrap: break-word; /* Internet Explorer 5.5+ */   
7. } 

 

经测试，除IE[当前使用6]外, 其他可以.... 郁闷，然后增加 width:600px; 后，ok,.换行了，其实位置还是衍生出去了。样子是这样的： 代码是在里面了，但下面的叙述性的东西却出了去。在说，定义一个这个宽度也不是个好的方法，其他的不直接改这个css的方法基本没有了。 
然后看上面css想到， 为什么定义其他的都用 white-space 而定义 IE 的不使用呢? 又不是IE 不支持。。于是加上就可以了

 

1. pre {   
2. whitewhite-space: pre-wrap; /* css-3 */   
3. whitewhite-space: -moz-pre-wrap; /* Mozilla, since 1999 */   
4. whitewhite-space: -pre-wrap; /* Opera 4-6 */   
5. whitewhite-space: -o-pre-wrap; /* Opera 7 */   
6. word-wrap: break-word; /* Internet Explorer 5.5+ */   
7. whitewhite-space : normal ; /* Internet Explorer 5.5+ */   
8. }  

 

至于本站上使用的是把ie和其他的分开了，因为white-space 在最后也都作用于其他了....

 

1. pre {   
2. whitewhite-space: pre-wrap; /* css-3 */   
3. whitewhite-space: -moz-pre-wrap; /* Mozilla, since 1999 */   
4. whitewhite-space: -pre-wrap; /* Opera 4-6 */   
5. whitewhite-space: -o-pre-wrap; /* Opera 7 */   
6. }  

 

 

1. * html pre {   
2. word-wrap: break-word; /* Internet Explorer 5.5+ */   
3. whitewhite-space : normal ; /* Internet Explorer 5.5+ */   
4. }