在工作中我遇到一个问题，其实功能也不复杂，就是上面有个textarea标签 ，里面输入内容，下面有个显示效果 ，有个条件就是 上面输入的什么格式（比如换行等等），下面显示的也是 什么格式。如下图：

这个功能真的不复杂。实现如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Demo</title>

     <style>

         .reset{

             width:300px; margin: 20px auto 0; border:1px solid #00b3ee; height: auto;

             display: block;

         }

      </style>

 </head>

 <body>

 <textarea class="reset" id="inputText" rows="5"></textarea>

 <pre id="demoShow" class="reset">

 </pre>

 <script>

     (function(content){

         var oInputText=content.getElementById('inputText'),

                 oDemoShow=content.getElementById('demoShow');

         oInputText.onkeyup=function(){

             oDemoShow.innerHTML=oInputText.value;

         }

     })(document)

 </script>

 </body>

 </html>

但是问题是当我 写的内容 如下时：

内容竟然超出了，我不加思索的加上了：

  #demoShow{word-wrap: break-word; word-break: break-all;}

结果，额，没反应；

什么鬼，哦，我忘了white-space，看看他有什么值：

对了，那就用pre-wrap或者pre-line ,那他们俩个具体是什么区别呢？

pre-wrap是保留空白符序列，大白话就是 有多少空格就显示多少空格；

pre-line 是合并空白符序列，大白话就是 无论多少空格只显示一个空格 和 对于首个单词前面的空格 不显示；

所以咱的目的是保留用户输入的格式，那就要用pre-wrap;

看看效果：

太好了，成功了，可是这怎么回事？如下图：

怎么单词断了，这是在产品中绝对不允许的，我该怎么办啊？我无数次的默念break-all....;突然 我灵光一闪，对了还有keep-all呢！我的上帝看看他们分别是什么 意思：

哎呀就是 keep-all,就是keep-all ,看看效果如下：

good，太美了，完整代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Demo</title>

     <style>

         .reset{

             width:300px; margin: 20px auto 0; border:1px solid #00b3ee; height: auto;

             display: block;

         }

         #demoShow{word-wrap: break-word; word-break: keep-all; white-space: pre-wrap;}

     </style>

 </head>

 <body>

 <textarea class="reset" id="inputText" rows="5"></textarea>

 <pre id="demoShow" class="reset">

 </pre>

 <script>

     (function(content){

         var oInputText=content.getElementById('inputText'),

                 oDemoShow=content.getElementById('demoShow');

         oInputText.onkeyup=function(){

             oDemoShow.innerHTML=oInputText.value;

         }

     })(document)

 </script>

 </body>

 </html>

总结：

   说了这么多 ，其实我想说的是：word-wrap ,word-break 和white-space三个是相互扶助，共同完成一个 目标的。其中 ：

   word-wrap是 确定是否换行，

   word-break是 确定换行是暴力换行，还是遇到空格 温柔的换行；

   white-space是 确定对于空格如何处理，对换行方式允许吗；

谢谢大家批评指正！

word-wrap ,word-break 和white-space 的联系的更多相关文章

  1. word break和word wrap

    默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...

  2. word wrap 解惑

    源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...

  3. reverse the string word by word

    题目:Given an input string, reverse the string word by word. For example,Given s = "the sky is bl ...

  4. LeetCode 5:Given an input string, reverse the string word by word.

    problem: Given an input string, reverse the string word by word. For example: Given s = "the sk ...

  5. Microsoft.Office.Interop.Word 创建word

    Microsoft.Office.Interop.Word 创建word 转载:http://www.cnblogs.com/chenbg2001/archive/2010/03/14/1685746 ...

  6. dom4j解析xml报错:Nested exception: org.xml.sax.SAXParseException: White space is required between the processing instruction target and data.

    采用dom4j方式解析string类型的xml xml:        String string="<?xmlversion=\"1.0\" encoding=\ ...

  7. C#用Microsoft.Office.Interop.Word进行Word转PDF的问题

    之前用Aspose.Word进行Word转PDF发现'\'这个字符会被转换成'¥'这样的错误,没办法只能换个方法了.下面是Microsoft.Office.Interop.Word转PDF的方法: p ...

  8. Sublime Text 2 自动开启换行 Word Wrap

    首先当然要夸一下神器 Sublime Text 2,自从第一次用我就彻底把神马 Notepad++ 和 TextMate 打入冷宫,用来开发 WEB 项目从此 IDE 都不需要了! 下面讲讲如何自动开 ...

  9. 18. Word Ladder && Word Ladder II

    Word Ladder Given two words (start and end), and a dictionary, find the length of shortest transform ...

  10. word to word

    Question: For each word, you can get a list of neighbor words by calling getWords(String), find all ...

随机推荐

  1. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  2. C# - 值类型、引用类型&走出误区，容易错误的说法

    1. 值类型与引用类型小总结 1)对于引用类型的表达式(如一个变量),它的值是一个引用,而非对象. 2)引用就像URL,是允许你访问真实信息的一小片数据. 3)对于值类型的表达式,它的值是实际的数据. ...

  3. iOS---iOS10适配iOS当前所有系统的远程推送

    一.iOS推送通知简介 众所周知苹果的推送通知从iOS3开始出现, 每一年都会更新一些新的用法. 譬如iOS7出现的Silent remote notifications(远程静默推送), iOS8出 ...

  4. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  5. JS实现页面进入、返回定位到具体位置

    最为一个刚入职不久的小白...慢慢磨练吧... JS实现页面返回定位到具体位置 其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了. ...

  6. Postman接口调试神器-Chrome浏览器插件

    首先大家可以去这个地址下载 Postman_v4.1.3 这个版本,我用的就是这个版本 http://chromecj.com/web-development/2014-09/60/download. ...

  7. 基于window7+caffe实现图像艺术风格转换style-transfer

    这个是在去年微博里面非常流行的,在git_hub上的代码是https://github.com/fzliu/style-transfer 比如这是梵高的画 这是你自己的照片 然后你想生成这样 怎么实现 ...

  8. UVA-146 ID Codes

    It is 2084 and the year of Big Brother has finally arrived, albeit a century late. In order to exerc ...

  9. 使用python自动生成docker nginx反向代理配置

    由于在测试环境上用docker部署了多个应用,而且他们的端口有的相同,有的又不相同,数量也比较多,在使用jenkins发版本的时候,不好配置,于是想要写一个脚本,能在docker 容器创建.停止的时候 ...

  10. BPM配置故事之案例10-获取外部数据

    老李:Hi,小明,我又来了 小明:--这次又怎么了. 老李:之前的物资管理方式太混乱了,这段时间我整理了采购物资清单,现在都录入到我们的ERP中了,以后申请物资改成从ERP数据选择吧.物资明细表我也做 ...