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

(编辑:jimmy 日期: 2024/10/31 浏览:2)

作为一个技术博客的站长,我的博客中有很多的代码示例(code samples ),有时还需要兼顾小屏幕移动设备。 我惊讶地看到超过 10%以上的访问量是通过手机访问的 —— 真的快疯了! 我开始关注手机上的显示细节,并看到在手机上代码示例会显示出长长的水平滚动条: 这真是糟糕的用户体验。 通过使用CSS的 white-space属性, 使代码在小屏幕上进行换行(wrap),以避免恼人的滚动条:
对pre标签添加CSS属性

复制代码代码如下:
/*
white-space 属性的取值:
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
*/
pre {
white-space: pre-line;
}

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

复制代码代码如下:
/*
匹配到具有 language- 开头的class的pre,code元素
例如: <pre class=" language-css" prism="1">
或 <code class=" language-css">
*/
pre[class*='language-'], code[class*='language-'] {
white-space: pre-line;
}

伟大的 white-space 属性避免了在手机设备上的水平滚动。 当然你需要根据情况通过 media query 决定在哪些设备上生效。 有时候, 代码示例被强制断行(line-broken)可能不好阅读, 但比起让人抓狂的水平滚动条来说,换行肯定要友好一些。

一句话新闻

高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。