讓示例代碼在手機(jī)上換行顯示以避免惱人的滾動(dòng)條的方法教程

本篇內(nèi)容主要講解“讓示例代碼在手機(jī)上換行顯示以避免惱人的滾動(dòng)條的方法教程”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“讓示例代碼在手機(jī)上換行顯示以避免惱人的滾動(dòng)條的方法教程”吧!

代碼如下:

/*
white-space 屬性的取值:
normal 默認(rèn)?？瞻讜?huì)被瀏覽器忽略。
pre 空白會(huì)被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標(biāo)簽。
nowrap 文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到
標(biāo)簽為止。
pre-wrap 保留空白符序列，但是正常地進(jìn)行換行。
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 屬性避免了在手機(jī)設(shè)備上的水平滾動(dòng)。 當(dāng)然你需要根據(jù)情況通過(guò) media query 決定在哪些設(shè)備上生效。 有時(shí)候, 代碼示例被強(qiáng)制斷行(line-broken)可能不好閱讀, 但比起讓人抓狂的水平滾動(dòng)條來(lái)說(shuō),換行肯定要友好一些。

到此，相信大家對(duì)“讓示例代碼在手機(jī)上換行顯示以避免惱人的滾動(dòng)條的方法教程”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！