讓你的 pre 标签能自動換行

讓你的pre標記自動換行

最近發了很多都要貼代碼的文,我貼代碼用的插件是Wp-Codebox,另外我也比對過其他的一些插件諸如WP-SyntaxSyntaxHighlighter。這些插件被解析出來後無非就是<pre></pre>。但是有個問題就是有時候貼的代碼過長,它不會自動換行,我看到很多人的blog裡面貼的代碼都是需要把滾動條拉到最右端才能看到全部代碼。其實你只要定義下pre的css就可以了(我說的是廢話)。


具體定義如下

1
2
3
pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ }
 
* html pre { word-wrap: break-word; /* Internet Explorer 5.5+ */ white-space : normal ; /* Internet Explorer 5.5+ */ }   //如果你是用插件貼代碼的,不要加上這個,否則在IE在會出錯,不信你試試

具體你可以看我這個頁面。大功告成。就是如此。
對此CSS定義更詳細的說明請戳這裡

18 Responses to 讓你的 pre 标签能自動換行

  1. CSS码我很头疼,我一直指望研究他,然后对BLOG有些整体的改变
    一天下来,只好放弃……

    然后,偶尔看到右边的 ESTL 想了很久,才想起,这是电石雷光四字英文的头一个字母的组合~ – -!!!

  2. Leeiio says:

    @加菲小可可可可可可……:我已經是一個技術人了,不懂可以來問我

  3. xiaorsz says:

    收藏学习了,以后应该会用得到!
    你博客上那提示挺不错的,用的插件还是自己判断的 cookie?

  4. NetPuter says:

    嘿嘿,效果很不错哦!准备转载~

  5. CssRain says:

    我怎么收到你的 文章邮件了 ,奇怪。呵呵

  6. 胡戈戈 says:

    在我博客测试了好像不行

  7. Leeiio says:

    @胡戈戈: 你用

    .wp_syntax pre{ }試試

  8. Leeiio says:

    @CssRain: 呃,我也很奇怪。。莫非是我發google friend connect的時候發錯邀請方式了?

  9. Leeiio says:

    @胡戈戈:呃,很奇怪,我的是可以的,我剛才用了你blog的代碼插件用了也是可以的,我只加了以下的代碼pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ }你的blog裡面難道對pre標籤有定義了麼?

  10. Leeiio says:

    @胡戈戈: 我剛才在ff裡面給你的blog定義了這個css有效的呀,對了,ie下目前是無效的~

  11. 胡戈戈 says:

    啊,那我自己在FF下怎么定义无效呢

  12. Leeiio says:

    @胡戈戈: 很詭異。。我用FF插件Web Developer插件給你的blog加上css,然後立馬就自動換行了~

  13. 胡戈戈 says:

    FF下可以,但IE又不行了

  14. Leeiio says:

    @胡戈戈: IE的確實有點問題,如果加上下面那個IE的css,代碼顯示會擠做一團,目前我電腦的XP系統進不去,無法調試,再則我恨IE~

  15. 非常感谢,已解决WP-CODEBOX 换行问题,收藏~

Leave a Reply

Your email address will not be published. Required fields are marked *