在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插件自动生成

《在wordpress中为代码自动显示滚动条》有4个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注