Keep on going, never give up.

PRE标签及换行问题

之前网站使用Syntax highlighter做代码高亮,现在感觉这类网站插件太“庞大”了,经常要加载太多的FLASH、JS脚本,所以,干脆全替换改为pre普通标签,替换过后,原插件自带的复制、查看、显示行号等小功能都没了,不过整个网页看起来要简单清爽多了,本文总结pre标签的用法。

一、pre标签介绍

pre标签用于格式化显示网站页面内容,编写代码时是需要带封堵标记的,也就是务必成对使用,

<pre>
//演示程序代码
//...
</pre>

二、pre标签的换行问题

只要使用pre格式化显示内容,默认设置下,URL、连续的英文字符等内容均会越界,所以还需考虑换行问题,可通过如下代码解决:

<style type="text/css">
.code {
    *word-break: break-all;/*for IE7*/
    *word-wrap: break-word;/*for IE7*/
    white-space:pre-wrap;
    word-wrap:break-word;
}
</style>
<pre class="code">
//演示程序代码
//...
</pre>

增加上面的CSS定义后,网站上的页面代码可自动换行,如果连IE7用户也不考虑了,可把上面两句带星号的CSS删除掉,一般喜欢编程、写代码的访客浏览器版本都不低。

参考资料:

http://www.w3schools.com/tags/tag_pre.asp

相关评论(0):  

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客

最新文章

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载也必须遵循“署名-非商业用途-保持一致”的创作共用协议. 返回顶部
Copyright@2005-2016 Metsky.com, All rights Reserved.