作為一個技術博客的站長,我的博客中有很多的代碼示例(code samples ),有時還需要兼顧小屏幕移動設備。 我驚訝地看到超過 10%以上的訪問量是通過手機訪問的 —— 真的快瘋了! 我開始關注手機上的顯示細節，並看到在手機上代碼示例會顯示出長長的水平滾動條: 這真是糟糕的用戶體驗。 通過使用CSS的 white-space屬性, 使代碼在小屏幕上進行換行(wrap),以避免惱人的滾動條:
對pre標簽添加CSS屬性
復制代碼代碼如下:
/*
white-space 屬性的取值:
normal 默認。空白會被浏覽器忽略。
pre 空白會被浏覽器保留。其行為方式類似 Html 中的 <pre> 標簽。
nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到
標簽為止。
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)可能不好閱讀, 但比起讓人抓狂的水平滾動條來說,換行肯定要友好一些。