HTML中的code标签很具有迷惑性，其实其作用只是把显示的文本变为等宽字体而已，与代码展示息息相关的空格，换行符或tab字符的效果仍然会按照HTML默认的规则处理。如果要按照预定义的格式显示代码文本，实质应该使用pre标签，这个标签中的文字不但会以等宽字体显示而且会保留原有的空格，换行符或tab字符长度。当然不排除新的HTML5标准会对code做些符合其名称的优化，所以最佳实践是在pre中套用code标签。

需要注意的是pre中的tab字符会占8个字符长度，所以并不推荐使用。另一个需要注意的问题是pre中展示HTML代码也不能直接使用HTML标签，显然这些标签仍然会被直接解释（例如a标签会被解释为一个超链接），所以必须使用转义字符来转义后用来显示。因此同时也必须注意pre中不能直接出现诸如标题或p等标签。记住，如果是要用来展示的HTML文本代码就必须使用转义字符。

代码展示中另一个问题就是有些过长的代码行是否应该自动换行的问题。这个其实可以通过CSS中的word-wrap属性（这个属性似乎来自CSS3标准，但是很早就得以实现，而且居然还是微软ie6最先实现的。。。）来解决，设置word-wrap:break-word即可。关于word-wrap属性使用这方面的信息，这里有篇来自淘宝UED的文章解释的不错。

同时需要一提的是CSS中的white-space属性，这个属性能够设置处理文本内空白符与换行符的方式。默认是normal，如果设置为white-space: pre那么显示方式就与pre标签中的文本类似，即原样输出空格符与换行符。还可以设为nowrap，这样就不会换行直至遇到<br/>标签。CSS2.1标准中又新加入pre-line与pre-wrap，前者保留空格符忽略换行符，后者则相反。这个属性经常会与word-wrap属性共同出现来设置文本的显示方式。

chao

微信支付

支付宝