pre标签里内容自动换行的方法

今天在写wiki的时候用了pre标签,我们都知道标签可定义预格式化的文本,一个常见应用就是用来放程序的源代码。我有一段代码特别长,结果它不换行直接超出了pre外层的容器。查阅了资料发现:被包围在 pre 元素中的文本通常会保留空格和换行符,但不幸的是,当你在标签里面写代码的时候,如果你没有手动换行,它也会给你保留,而不会自动换行。

我就给pre加了一个style:

word-break: break-all;

但是它没有起到任何的作用,最后找到了一种兼容IE6,IE7, IE8, Firefox, Opera, Safari和Chrome的方法,在CSS中添加下面的代码:

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

这样之后pre标签中的内容就自动换行了!