计算器代码示例代码

One part of being a technical blogger that I've had to come to grips with is code samples and small mobile device screens.  I was amazed when I saw a double-digit percentage of visits to this blog were from mobile phones -- mental!  I started paying more attention to detail on said devices and I realized that code samples required loads of horizontal scrolling:  yuck.  By utilizing CSS white-space, we can make code wrap and avoid arm-numbing scrolling on small screens:

我必须要成为技术博客的一部分是代码示例和小型移动设备屏幕。 当我看到来自手机的访问量达到两位数时，我感到非常惊讶-精神！ 我开始更加关注上述设备的细节，并且意识到代码示例需要水平滚动加载：:。 通过使用CSS空格，我们可以进行代码换行并避免在小屏幕上进行麻木滚动：

pre {	white-space: pre-line;}

I like using PrismJS so that requires a different selector:

我喜欢使用PrismJS，因此需要其他选择器：

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

Thankfully white-space lets me help you all avoid horizontal scrolling on mobiles. Of course you'll need to choose which media query you want to apply that to, but I'll let you do that.  In some cases it may be difficult to read the line-broken code, but that's surely better than all that crazy scrolling.

值得庆幸的是，空白让我帮助您避免手机上的水平滚动。 当然，您需要选择要将其应用于哪个媒体查询，但我会让您做到这一点。 在某些情况下，读取断行代码可能很困难，但这肯定比所有疯狂的滚动更好。

翻译自:

计算器代码示例代码