Nelson 寫些 iOS 開發的東東

Posts match “ theme ” tag:

讓文章裡頭的程式碼可以自動換行

| Comments

Logdown 有支援程式碼區塊,讓我們可以輕鬆的貼上程式碼,這是一個很貼心的設計,可惜的是它所顯示出來的程式碼無法根據頁面寬度自動換行,導致使用者必須左右捲動頁面才能看到完整的程式碼。

以下這一小段 CSS 可以解決這個問題,你只要去 Logdown 管理後台編輯佈景主題的 HTML,把這段程式碼貼在 </head> 標籤(大約在第20幾行附近)上方就可以了。

<style type="text/css">
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 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
</style>