刚才想改善一下网站代码块的显示，在小屏幕上会出现水平滚动条。在电脑Firefox、Chrome都很正常，然而手机上还是会换行。。。我估计是css中white-space属性的原因。

明明Chrome和Safari都是WebKit,为什么还会有差别。。。。

待我借到Mac后再完善

Update 2017.6.7

解决啦。。方法是为pre标签添加word-wrap: normal;属性。

问题背景

因为我不知道jekyll/kramdown预处理过程具体是怎么配置的，就直接看生成的网页源码，发现代码块都是一个pre标签里面是code标签。经过不断尝试，发现应该给code标签添加属性white-space: pre;，给pre标签添加属性overflow-x: auto;。此时电脑上的Firefox、Chrome都可以横向滚动显示了。正当我十分高兴时，手机上的Safari却还是换行。昨天晚上借来Mac，Mac上的Safari表现和手机一样，Mac上的Chrome和PC上的Chrome表现一样。对照一个有横向滚动条的样式试了一会，发现为pre标签添加word-wrap: normal;属性即可。

可能原因

这些white-spaceword-wrap属性是用来控制空白字符的显示，断词的。为什会表现不一样?可能要去看CSS标准以及各浏览器的文档了。这事算是让我开始认识了浏览器的差异。。。