zoukankan      html  css  js  c++  java
  • 换行符在textarea、div、pre中的区别

    关于换行符,网上有许多说法,IE早期的浏览器是 ,有的浏览器是 ,但很难找到确切的版本号。经过本人正则匹配测试,chrome、firefox、safari、IE11都是 ,

    因此保险起见,若对换行符进行正则匹配,应当同时匹配 , 以及 .

    值得一提的是 、 和 都有换一行的效果,有些同学写换行时常写作 ,这就相当于换了两行,因此必须注意!

    换行符用于textarea

    textarea内的换行便是以换行符的形式实现,换行符也能用于textarea

    换行符用于一般div

    当我们尝试将 用于一般div

    eg: document.querySelector(".a").innerHTML= "12 1";

    显示:

    未显示换行,这是因为在默认情况下空白会被忽略,所以无论是文本里的空白、换行都会被当做一个空格处理

    若想显示空白,需添加属性white-space: pre; 保留换行和空白 或者pre-line 保留换行,忽略空白

    增添white-space: pre;显示:

    这时候获取innerHTML,输出: 12 1, 

    / /.test(document.querySelector(".a").innerHTML) // true,

    换行符用于可编辑div

    eg: document.querySelector(".a").innerHTML= "1        2 1";

    显示:

    通过审查元素,可以发现可编辑div自带white-space: pre;属性!因此文本空白和换行符都对它有效

    而可编辑div内直接进行换行操作,换行又是如何实现的?

    进行换行:

    再输出innerHTML

    1 2 1 <div>11</div><div>111</div>

    因此: 对于可编辑div,换行符有效,但它本身的换行是通过div来实现的,这不同于textarea!

    一般pre

    对于一般pre,文本空格与换行符都有效,也自带white-space: pre;属性。

    可编辑pre

    类似于可编辑div,换行符有效,本身的换行通过增添div实现。

  • 相关阅读:
    亚洲区哈尔滨赛区网络预选赛over
    背包问题
    Memcache基础教程
    Telnet的命令
    Telnet技术白皮书
    workthread模式
    Telnet的命令
    telnet 测试memcached
    telnet 测试memcached
    Memcache基础教程
  • 原文地址:https://www.cnblogs.com/yanze/p/6358020.html
Copyright © 2011-2022 走看看