• 10
  • 8月

我开这个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标签中就可以了。

标签:

您可以对这篇文章发表一条评论,或者在您自己的网站中引用 (Trackback) 它

发表一条评论

所有标签:.net Ajax Java javascript Linux map MySQL RSS TD-SCDMA Ubuntu vim web Win7 乱码 基础知识 备份 奥运会 希望泉 性能 缓存 编程