转载：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. }??

?

?