在工作中我遇到一个问题，其实功能也不复杂，就是上面有个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. C#给PDF文档添加文本和图片页眉

    页眉常用于显示文档的附加信息,我们可以在页眉中插入文本或者图形,例如,页码.日期.公司徽标.文档标题.文件名或作者名等等.那么我们如何以编程的方式添加页眉呢?今天,这篇文章向大家分享如何使用了免费组件 ...

  2. MVVM模式解析和在WPF中的实现（三）命令绑定

    MVVM模式解析和在WPF中的实现(三) 命令绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  3. JavaScript Math和Number对象

    目录 1. Math 对象:数学对象,提供对数据的数学计算.如:获取绝对值.向上取整等.无构造函数,无法被初始化,只提供静态属性和方法. 2. Number 对象 :Js中提供数字的对象.包含整数.浮 ...

  4. Matlab slice方法和包络法绘制三维立体图

    前言:在地球物理勘探,流体空间分布等多种场景中,定位空间点P(x,y,x)的物理属性值Q,并绘制三维空间分布图,对我们洞察空间场景有十分重要的意义. 1. 三维立体图的基本要件: 全空间网格化 网格节 ...

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统（75）-微信公众平台开发-用户管理

    系列目录 前言 本节主要是关注者(即用户)和用户组的管理,微信公众号提供了用户和用户组的管理,我们可以在微信公众号官方里面进行操作,添加备注和标签,以及移动用户组别,同时,微信公众号也提供了相应的接口 ...

  6. SQL Server-聚焦在视图和UDF中使用SCHEMABINDING（二十六）

    前言 上一节我们讨论了视图中的一些限制以及建议等,这节我们讲讲关于在UDF和视图中使用SCHEMABINDING的问题,简短的内容,深入的理解,Always to review the basics. ...

  7. ajax前后端数据交互简析

    前端-------->后端 方法:POST 将要传递给后台的数据在前端拼接成url字符串,通过request.send()传递给后台,后台php把得到的数据以索引数组的方式存储在$_POST中. ...

  8. CGI与FastCGI nginx+PHP-FPM

    本文转载自CGI与FastCGI 1.当我们在谈到cgi的时候,我们在讨论什么 最早的Web服务器简单地响应浏览器发来的HTTP请求,并将存储在服务器上的HTML文件返回给浏览器,也就是静态html. ...

  9. 记录一则Linux SSH的互信配置过程

    需求:四台Linux主机,IP地址为192.168.10.10/11/12/13,配置登录用户的互信 1.各节点ssh-keygen生成RSA密钥和公钥 ssh-keygen -q -t rsa -N ...

  10. BlockingCollection使用

    BlockingCollection是一个线程安全的生产者-消费者集合. 代码 public class BlockingTest { BlockingCollection<int> bc ...