前两天，收到一客户的反馈，他们公司的外贸网站的产品详细页面被撑开，许多产品页面出现了横向滚动条，看到这个问题时，我以为是因为没有对英文内容设置word-break:break-word 造成的，后来检查了一下，不存在这个问题。而且内容最外层的DIV也有固定的宽度，反复试了多次，才发现是因为只要有<Pre>标签，里面的内容都不能自动换行， 这时才想到可能是Pre标签的问题，因为平时对这个标签使用的并不多，所以这时才开始查了一下，原来被包围在 pre 元素中的文本通常会保留空格和换行符，但是，当你在<pre>标签里面写代码的时候，如果你没有手动换行，它是不会自动换行的，而是一直保持一行的状态。

找到了问题的根源，问题也就迎刃而解了，其实也很简单，只需在网站CSS文件里面给<Pre>定义一下样式即可！

CSS样式：

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