讓範例程式碼在手機上換行顯示

標籤：css   行動裝置   pre   換行   

原文連結: Wrapping Code Samples on Mobile Devices
原文日期: 2014年5月29日
翻譯日期: 2014年5月30日
翻譯人員: 鐵錨

作為一個技術部落格的站長,我的部落格中有很多的程式碼範例(code samples ),有時還需要兼顧小螢幕行動裝置。 我驚訝地看到超過 10%以上的訪問量是通過手機訪問的 —— 真的快瘋了! 我開始關注手機上的顯示細節，並看到在手機上程式碼範例會顯示出長長的水平捲軸: 這真是糟糕的使用者體驗。 通過使用CSS的 white-space屬性, 使代碼在小螢幕上進行換行(wrap),以避免惱人的捲軸:
對pre標籤添加CSS屬性

/*  white-space 屬性的取值:  normal    預設。空白會被瀏覽器忽略。  pre       空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標籤。  nowrap    文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤為止。  pre-wrap  保留空白符序列，但是正常地進行換行。  pre-line  合并空白符序列，但是保留分行符號。*/pre {  white-space: pre-line;}

我喜歡使用PrismJS,所以需要使用不同的選取器:

/*  匹配到具有 language- 開頭的class的pre,code元素  例如: <pre class=" language-css" prism="1">  或 <code class=" language-css">*/pre[class*='language-'], code[class*='language-'] {  white-space: pre-line;}

偉大的 white-space 屬性避免了在手機裝置上的水平滾動。 當然你需要根據情況通過 media query 決定在哪些裝置上生效。 有時候, 程式碼範例被強制斷行(line-broken)可能不好閱讀, 但比起讓人抓狂的水平捲軸來說,換行肯定要友好一些。