在工作中我遇到一个问题，其实功能也不复杂，就是上面有个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. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  2. 对抗密码破解 —— Web 前端慢 Hash

    (更新:https://www.cnblogs.com/index-html/p/frontend_kdf.html ) 0x00 前言 天下武功,唯快不破.但在密码学中则不同.算法越快,越容易破. ...

  3. TODO：搭建Laravel VueJS SemanticUI

    TODO:搭建Laravel VueJS SemanticUI Laravel是一套简洁.优雅的PHP开发框架(PHP Web Framework).可以让你从面条一样杂乱的代码中解脱出来:它可以帮你 ...

  4. 【资源】.Net 入门@提高 - 逆天的高薪之路！

     入门看视频,提高看书籍,飘升做项目.老练研开源,高手读外文,大牛讲低调~    官方学习计划 http://www.cnblogs.com/dunitian/p/5667901.html ----- ...

  5. 由js apply与call方法想到的js数据类型（原始类型和引用类型）

    原文地址:由js apply与call方法想到的js数据类型(原始类型和引用类型) js的call方法与apply方法的区别在于第二个参数的不同,他们都有2个参数,第一个为对象(即需要用对象a继承b, ...

  6. go语言：多个[]byte数组合并成一个[]byte

    场景:在开发中,要将多个[]byte数组合并成一个[]byte,初步实现思路如下: 1.获取多个[]byte长度 2.构造一个二维码数组 3.循环将[]byte拷贝到二维数组中 package gst ...

  7. C# 对象实例化 用json保存 泛型类 可以很方便的保存程序设置

    用于永久化对象,什么程序都行,依赖NewtonSoft.用于json序列化和反序列化. using Newtonsoft.Json; using System; using System.Collec ...

  8. ntp

    一: 在一台可以连接外网的服务器A上配置ntp: 配置  /etc/ntp.conf  文件: server 202.120.2.101            # local clock (LCL) ...

  9. Ubuntu搭建lnmp环境

    1.安装nginx 安装 sudo apt-get install nginx 服务启动.停止.重启 /etc/init.d/nginx start /usr/sbin/nginx -c /etc/n ...

  10. RSA算法

    RSA.h #ifndef _RSA_H #define _RSA_H #include<stdio.h> #include<iostream> #include<mat ...