[转载]让pre自动换行 pre标签强制换行

让 <pre /> 标签中的内容自动换行并符合 W3C 标准（多浏览器支持）

默认情况下，<pre /> 标签中的内容若超出范围不会自动换行，这样无论在显示或打印都会出现麻烦。

下面提供符合 W3C 标准并支持多浏览器的 CSS 样式代码：

pre{
	white-space:pre-wrap;
	white-space:-moz-pre-wrap;
	white-space:-pre-wrap;
	white-space:-o-pre-wrap;
	word-wrap:break-word;
}

 
更多内容请参见：http://www.w3.org/TR/css3-text/#white-space。

pre标签会原样保留HTML内容的格式，可是如果宽度过大会把页面撑坏，这时候需要自动换行来帮忙：
Wrapping the pre tag
Making preformated text wrap in CSS3, Mozilla, Opera and IEis the tip that let's you use the pre tag to keep the formatting, without cursing yourself when some of the content is too long and doesn't wrap:
pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

 

父标记最好加个DIV,并设置CSS属性：word-wrap: break-word;white-space : normal；
直接使用style写法：

<pre style="width:30px;word-break: break-all; word-wrap:break-word;border:1px solid #555"> 
asfasdfas 
dfasd 
fa 
sdfasdf 
</pre>