您现在的位置是：网站首页> 编程资料编程资料

让示例代码在手机上换行显示以避免恼人的滚动条CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

2021-09-06 1013人已围观

简介 在手机上代码示例会显示出长长的水平滚动条，通过使用CSS的 white-space属性, 使代码在小屏幕上进行换行(wrap)以避免恼人的滚动条

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

复制代码
代码如下:

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

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

复制代码
代码如下:

/*
匹配到具有 language- 开头的class的pre,code元素
例如: 

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

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

上一篇：通过CSS样式来修改ExtJS:TreePanel的小图标原生js实现的日期时间插件鼠标点击文本框弹出日期时间表格选择日期效果JS鼠标悬停开关灯渐变显示图片及点击后慢慢变大/变小显示的全屏相册动无需点击鼠标感应图片无缝左右JS滚动代码JS制作页面鼠标点击拖动生成小图标特效源码

下一篇：CSS解决文字与图片不能水平居中对齐的问题CSS实现同一行的图片和文字垂直居中对齐的方法垂直居中对齐的CSS示例代码css中使input输入框与img(图片)在同一行居中对齐通过css使用background-color为背景图添加遮罩效果的两种方法SCSS移动端页面遮罩层效果的实现及常见问题解决css遮罩全屏居中对齐的实现方式

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网