讓你的 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定義更詳細的說明請戳這裡

  • CSS碼我很頭疼,我一直指望研究他,然後對BLOG有些整體的改變
    一天下來,只好放棄……

    然後,偶爾看到右邊的 ESTL 想了很久,才想起,這是電石雷光四字英文的頭一個字母的組合~ – -!!!

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

  • 收藏學習了,以後應該會用得到!
    你博客上那提示挺不錯的,用的插件還是自己判斷的 cookie?

  • @xiaorsz:此文。 哈。

  • 嘿嘿,效果很不錯哦!準備轉載~

  • @NetPuter:歡迎歡迎~

  • 我怎麼收到你的 文章郵件了 ,奇怪。呵呵

  • 在我博客測試了好像不行

  • @胡戈戈: 你用

    .wp_syntax pre{ }試試

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

  • 不行all the same

  • @胡戈戈:呃,很奇怪,我的是可以的,我剛才用了你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標籤有定義了麼?

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

  • 啊,那我自己在FF下怎麼定義無效呢

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

  • FF下可以,但IE又不行了

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

  • 非常感謝,已解決WP-CODEBOX 換行問題,收藏~