CSS 让 PRE 预格式化标签强制自动换行

Question

PRE 元素可定义预格式化的文本。被包围在 PRE 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。对于技术博客经常会用到 PRE 标签输出代码或是代码高亮，而默认情况下，PRE 标签中的内容若超出范围不会自动换行。

下面介绍一个方法让 <pre> 标签中的内容自动换行并符合 W3C 标准（多浏览器支持）

pre{
  white-space:pre-wrap  /*css3.0*/
  white-space:-moz-pre-wrap  /*Firefox*/
  white-space:-pre-wrap  /*Opera4-6*/
  white-space:-o-pre-wrap  /*Opera7*/
  word-wrap:break-word  /*InternetExplorer5.5+*/
}

强制换行

自动换行问题，正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大，正常文字的换行（亚洲文字和非亚洲文字）元素拥有默认的 white-space:normal ，所以基本不同考虑换行的问题。

连续的英文字符和阿拉伯数字，使用 word-wrap:break-word 或者 word-break:break-all 实现强制断行

#wrap{word-break:break-all; width:200px;}
#wrap{word-wrap:break-word; width:200px;}

连续的英文字符和阿拉伯数字的断行，Firefox 的所有版本的没有解决这个问题，我们只有让超出边界的字符隐藏，或者给容器添加滚动条

#wrap{word-break:break-all; width:200px; overflow:auto;}

对于 table 表格，IE 浏览器可以使用 table-layout:fixed 强制 table 的宽度，让多余内容自动隐藏

<table style="table-layout:fixed" width="200">
    <tr>
        <td>abcdefghigklmnopqrstuvwxyz1234567890</td>
    </tr>
</table>

单元格 td th 采用 word-break:break-all 或者 word-wrap:break-word 换行，里面如果嵌套了 div 或者 p 段落标签，也可以使用同样的方法。

对于 Firefox 浏览器，使用 table-layout:fixed 强制 table 的宽度，单元格 td th 采用 word-break:break-all 或者 word-wrap:break-word 换行，使用 overflow:hidden 隐藏超出内容，在这里设置 overflow:auto 是无法起作用的。

word-break

• normal 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
• break-all 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
• keep-all 与所有非亚洲语言的 normal 相同。对于中文、韩文、日文、不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

对于中文，应该使用 break-all 属性。