zoukankan      html  css  js  c++  java
  • html+css展示空白类字符的技巧

    通常 html 中的空格,换行等,再展示实际界面时会被忽略,这时大家通常会用转义。如:空格变成  &nbsp;  、换行变成  <br>  等。

    接下来给大家介绍另一种简单的方法:

    pre

    通过  <pre>  标签 或者通过 css中的  white-space: pre  可以原封不动的显示所有的空格符号和换行符。

    <pre>你        
            - 好</pre>

     效果:

    <div style="white-space: pre;">你        
            - 好</div>

     效果:

    可以看到:pre标签自带了很多其他样式,如margin,font-family等,注意清除!

    注意: white-space: pre  顾名思义就是像 pre 标签那样显示空白字符

    优先采用 pre 标签

    尽管pre标签自带了很多样式可能不是我们想要的,但我还是推荐优先使用pre标签。
    考虑一下代码的 lint(format code) 和 打包,你就明白了。

    经过测试,只有采用pre标签才能保证以上两个场景,空格类字符不会被处理。

    自动换行问题

    当一行字符串过长时,你会发现页面显示不会自动换行,这可能会有一个糟糕的横向滚动条。

    <div class="wrapper">
        <pre>你          +           - 好 我   爱  中国 , 我是 long 的 传 人 - ----------------------------    ---- - - -- - ------- </pre>
    </div>
    <style>
        .wrapper {
            width: 400px;
            margin: 30px auto;
            border: 1px solid #ddd;
            overflow: auto;
        }
    </style>

     效果:

     没关系,我们可以 加上(或改用)样式:  white-space: pre-wrap;  (wrap表示自动换行)

    关于white-space,还有其他值:
    normal(默认):忽略空白类字符,自动换行;
    nowrap:忽略空白类字符,不自动换行;
    pre-line:仅保留换行符,会忽略空格等,会自动换行;

    <div class="wrapper">
        <pre style="white-space: pre-wrap;">你          +           - 好 我   爱  中国 , 我是 long 的 传 人 - ----------------------------    ---- - - -- - ------- </pre>
    </div>
    <style>
        .wrapper {
            width: 400px;
            margin: 30px auto;
            border: 1px solid #ddd;
            overflow: auto;
        }
    </style>

     效果:

     也许你已经发现了,博客园展示代码采用的就是pre标签,而且pre的white-space 被修改成了 pre-wrap。

  • 相关阅读:
    【算法笔记】B1015 德才论
    【算法笔记】B1014 福尔摩斯的约会
    【算法笔记】B1013 数素数
    【算法笔记】B1012 数字分类
    【算法笔记】B1011 A+B 和 C
    【算法笔记】B1010 一元多项式求导
    【算法笔记】B1009 说反话
    【算法笔记】B1008 数组元素循环右移问题
    SSLOJ 1336.膜拜神牛
    SSLOJ 1335.蛋糕切割
  • 原文地址:https://www.cnblogs.com/zhwc-5w4/p/13607272.html
Copyright © 2011-2022 走看看