作为一个技术博客的站长,我的博客中有很多的代码示例(code samples ),有时还需要兼顾小屏幕移动设备。 我惊讶地看到超过 10%以上的访问量是通过手机访问的 —— 真的快疯了! 我开始关注手机上的显示细节，并看到在手机上代码示例会显示出长长的水平滚动条: 这真是糟糕的用户体验。 通过使用CSS的 white-space属性, 使代码在小屏幕上进行换行(wrap),以避免恼人的滚动条:
对pre标签添加CSS属性
复制代码代码如下:
/*
white-space 属性的取值:
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直..