让示例代码在手机上换行显示以避免恼人的滚动条的方法教程

本篇内容主要讲解"让示例代码在手机上换行显示以避免恼人的滚动条的方法教程"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"让示例代码在手机上换行显示以避免恼人的滚动条的方法教程"吧!

代码如下:

/*
white-space 属性的取值:
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
*/
pre {
white-space: pre-line;
}

我喜欢使用PrismJS,所以需要使用不同的选择器:

代码如下:
/*
匹配到具有 language- 开头的class的pre,code元素
例如: 

或 
*/
pre[class*='language-'], code[class*='language-'] {
white-space: pre-line;
}

伟大的 white-space 属性避免了在手机设备上的水平滚动。 当然你需要根据情况通过 media query 决定在哪些设备上生效。 有时候, 代码示例被强制断行(line-broken)可能不好阅读, 但比起让人抓狂的水平滚动条来说,换行肯定要友好一些。
到此，相信大家对"让示例代码在手机上换行显示以避免恼人的滚动条的方法教程"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！