讓示例代碼在手機上換行顯示以避免惱人的滾動條

2024-07-11 08:30:54

字體：大中小

來源：轉載

供稿：網友

作為一個技術博客的站長,我的博客中有很多的代碼示例(code samples ),有時還需要兼顧小屏幕移動設備。我驚訝地看到超過 10%以上的訪問量是通過手機訪問的 —— 真的快瘋了! 我開始關注手機上的顯示細節，并看到在手機上代碼示例會顯示出長長的水平滾動條: 這真是糟糕的用戶體驗。通過使用CSS的 white-space屬性, 使代碼在小屏幕上進行換行(wrap),以避免惱人的滾動條:
對pre標簽添加CSS屬性

復制代碼

代碼如下:
/*
white-space 屬性的取值:
normal 默認?？瞻讜粸g覽器忽略。
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)可能不好閱讀, 但比起讓人抓狂的水平滾動條來說,換行肯定要友好一些。

上一篇：一行文字超過div寬度的時如何讓它不換行

下一篇：CSS設置未知大小圖片在已知大小容器水平垂直居中