在工作中我遇到一个问题，其实功能也不复杂，就是上面有个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. 【小程序分享篇 二 】web在线踢人小程序，维持用户只能在一个台电脑持登录状态

    最近离职了, 突然记起来还一个小功能没做, 想想也挺简单,留下代码和思路给同事做个参考. 换工作心里挺忐忑, 对未来也充满了憧憬与担忧.(虽然已是老人, 换了N次工作了,但每次心里都和忐忑). 写写代 ...

  2. nohup程序后台执行

    Linux常用命令,用于不挂断的执行程序. nohup命令:如果你正在运行一个进程,而且你觉得在退出帐户时该进程还不会结束,那么可以使用nohup命令.该命令可以在你退出帐户/关闭终端之后继续运行相应 ...

  3. GreenDao 数据库：使用Raw文件夹下的数据库文件以及数据库升级

    一.使用Raw文件夹下的数据库文件 在使用GreenDao框架时,数据库和数据表都是根据生成的框架代码来自动创建的,从生成的DaoMaster中的OpenHelper类可以看出: public sta ...

  4. Entity Framework Core 1.1 升级通告

    原文地址:https://blogs.msdn.microsoft.com/dotnet/2016/11/16/announcing-entity-framework-core-1-1/ 翻译:杨晓东 ...

  5. TDD在Unity3D游戏项目开发中的实践

    0x00 前言 关于TDD测试驱动开发的文章已经有很多了,但是在游戏开发尤其是使用Unity3D开发游戏时,却听不到特别多关于TDD的声音.那么本文就来简单聊一聊TDD如何在U3D项目中使用以及如何使 ...

  6. CRL快速开发框架系列教程十一(大数据分库分表解决方案)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  7. c# 基础 object ,new操作符，类型转换

    参考页面: http://www.yuanjiaocheng.net/webapi/config-webapi.html http://www.yuanjiaocheng.net/webapi/web ...

  8. HTML简单入门内容

    常用属性: Width=宽度 Height=高度 Size=大小 Color=颜色 Align=布局方向,值包括(top,bottom,left,right,center)上,下,左,右,中. Bor ...

  9. Kotlin的android扩展：对findViewById说再见（KAD 04）

    作者:Antonio Leiva 时间:Dec 12, 2016 原文链接:http://antonioleiva.com/kotlin-android-extensions/ 你也许已厌倦日复一日使 ...

  10. 张高兴的 UWP 开发笔记：汉堡菜单进阶

    不同于Windows 8应用,Windows 10引入了"汉堡菜单"这一导航模式.说具体点,就拿官方的天气应用来说,左上角三条横杠的图标外加一个SplitView控件组成的这一导航 ...