[CSS] 文本自动换行设置

想利用 <pre> 元素在展示文本方面的便利性，又不喜欢它那种不折行的效果？

这里给出一种自己总结的通过 CSS 控制方式来修改元素的 style 属性，以达到强制文本换行的目的的办法。

（支持 Safari for Mac, Firefox for Mac, Opera for Mac, Firefox for Windows, MSIE）

 

preformattext.css :

@charset "utf-8"; pre { white-space: pre; /* CSS2 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP printers */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ word-break: break-all; /* IE5 */ }

 

将以上代码保存为 preformattext.css ，然后在你的页面头部插入 meta 引用

<link rel="stylesheet" type="text/css" href="css/preformattext.css" />
即可，看看效果？