识比特

我开这个Blog主要想分享一下技术上的心得，顺便总结一下自己的收获，因此少不了会例举一些代码和配置文件。WordPress本身好像没有为这准备什么。之前我也是把代码直接放在正文中的。最近觉得十在不爽了，干脆自己为Blog添加代码显示框。

考虑了一下Html中的标签，准定改写pre标签，让它来实现代码显示。

在主题的style.css中定义：

pre {
    text-indent:0;
    border:1px solid black;
    padding:5px 15px 5px 15px;
    margin:5px 10px 5px 10px;
    word-wrap:break-word;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    background-color:#E6E6E6;
}

实现了将段首缩进置零（我正文中有自动段首缩进，所以得取消掉）、增加边框背景等样式，让它看起来像别的网站上的代码显示块。

其中最重要的是以下三行：

    word-wrap:break-word;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;

成功实现了在所有浏览器中文本在元素边界强制换行。这样连续的英文文本就不会把元素撑大了（相信做过Web开发的人都知道这个经典的问题）。

以后插入代码只要把它们放到pre标签中就可以了。