本篇內容主要講解“讓示例代碼在手機上換行顯示以避免惱人的滾動條的方法教程”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“讓示例代碼在手機上換行顯示以避免惱人的滾動條的方法教程”吧!
代碼如下:
/*
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)可能不好閱讀, 但比起讓人抓狂的水平滾動條來說,換行肯定要友好一些。
到此，相信大家對“讓示例代碼在手機上換行顯示以避免惱人的滾動條的方法教程”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
