zoukankan      html  css  js  c++  java
  • 让演示样例代码在手机上换行显示

    原文链接: Wrapping Code Samples on Mobile Devices
    原文日期: 2014年5月29日
    翻译日期: 2014年5月30日
    翻译人员: 铁锚

    作为一个技术博客的站长,我的博客中有非常多的代码演示样例(code samples ),有时还须要兼顾小屏幕移动设备。

    我吃惊地看到超过 10%以上的訪问量是通过手机訪问的 —— 真的快疯了! 我開始关注手机上的显示细节,并看到在手机上代码演示样例会显示出长长的水平滚动栏: 这真是糟糕的用户体验。 通过使用CSS的 white-space属性, 使代码在小屏幕上进行换行(wrap),以避免恼人的滚动栏:
    对pre标签加入CSS属性

    /*
      white-space 属性的取值:
      normal    默认。空白会被浏览器忽略。
      pre       空白会被浏览器保留。其行为方式相似 HTML 中的 <pre> 标签。

    nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 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)可能不好阅读, 但比起让人抓狂的水平滚动栏来说,换行肯定要友好一些。

  • 相关阅读:
    使用element-ui是下拉筛选选择
    vue 组件传值
    vue element 地址联动的使用
    vux scroller
    实时监听组件中路由的变化
    vuex的使用
    对移动端滚动高度的获取
    【转】ACM 取石子问题
    【转】ACM博弈知识汇总
    EOJ 2857 编辑距离
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/5193002.html
Copyright © 2011-2022 走看看