站长资源
中国站长网站

word-wrap ,word-break 和white-space 的区别

在工作中我遇到一个问题,其实功能也不复杂,就是上面有个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;
        }
12     </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>

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

内容竟然超出了,我不加思索的加上了:

1#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 的区别

评论 抢沙发

评论前必须登录!