今天小编跟大家讲解下有关让示例代码在手机上换行显示以避免恼人的滚动条 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关让示例代码在手机上换行显示以避免恼人的滚动条 的相关资料，希望小伙伴们看了有所帮助。
作为一个技术博客的站长,我的博客中有很多的代码示例(code samples ),有时还需要兼顾小屏幕移动设备。 我惊讶地看到超过 10%以上的访问量是通过手机访问的 —— 真的快疯了! 我开始关注手机上的显示细节 并看到在手机上代码示例会显示出长长的水平滚动条: 这真是糟糕的用户体验。 通过使用CSS的 white-space属性, 使代码在小屏幕上进行换行(wrap),以避免恼人的滚动条: 对pre标签添加CSS属性 复制代码代码如下: pre { white-space: pre-line; } 我喜欢使用PrismJS,所以需要使用不同的选择器: 复制代码代码如下: pre[class*='language-'], code[class*='language-'] { white-space: pre-line; } 伟大的 white-space 属性避免了在手机设备上的水平滚动。 当然你需要根据情况通过 media query 决定在哪些设备上生效。 有时候, 代码示例被强制断行(line-broken)可能不好阅读, 但比起让人抓狂的水平滚动条来说,换行肯定要友好一些。来源：爱蒂网
