四 08

在wordpress中为代码自动显示滚动条

添加评论

在写博客时，有时候添加的代码比较长，超过了一行所能显示的长度时，在WordPress的某些主题中会显示不全，只显示前半截出来，影响阅读。

解决这个问题方法其实很简单，只需要改一下主题的样式表就中可以了。

我以Easwy博客用的iNove主题为例，首先打开主题的样式表style.css，在样式表中搜索一下blockquote和pre。在inove主题里，它们使用相同的样式配置，在它们的样式里加上overflow-x: auto;，完整代码如下： 


blockquote, pre {
	background:#F4F5F7 3px 3px no-repeat;
	border:1px dashed #CCC;
	padding:8px 8px 8px 8px;
	margin:5px 0;
	overflow-x:auto
}

如果你的主题里没有关于blockquote和pre的样式，自己添加一下就行了。

加了这一句话以后，如果在blockquote和pre块的语句超过一行的长度，那么浏览器就会自动显示水平滚动条(scrollbar)，让读者滑过去看，很是方便。

比如，我下面这一句话，浏览器就会自动加滚动条： 

This a very long text to test the scrollbar of my theme. If you don't see such a scrollbar, please report a bug. my email address is easwy.mail -at- gmail -dot- com. Thanks!

另外，还可以设置滚动条的样式，使它与你的主题相符，具体实现参考文尾的第二篇参考文档。

参考文档

原创文章，请阅读页脚的许可方式，转载请注明：转载自易水博客 [ http://easwy.com/blog/ ]

本文链接地址: http://easwy.com/blog/archives/display_scrollbar_in_wordpress/

文章的脚注信息由WordPress的wp-posturl插件自动生成

建站手记

4条评论 添加评论

  1. alickguo
    2009/04/09 09:18 | #1
    回复 | 引用

    不太美观；
    BTW：总觉得超过80列的代码怪怪的 :)

  2. Easwy
    2009/04/09 12:28 | #2
    回复 | 引用

    @alickguo
    我写代码一般也不会超过80列，不过总有例外的情况。显示不好看总比显示不出来好 :-)

  3. Honwhy
    2011/05/06 19:07 | #3
    回复 | 引用

    能不能做成上下的滚动条，顺便将宽度变小一点。

  4. aben
    2011/06/24 23:06 | #4
    回复 | 引用

    我想问一下灰色底的虚线框是怎么实现的，我是菜鸟

评论本文