关于word-break/word-wrap/white-space的一些认知

今天正好看到一篇介绍这3个属性的文章，想想以前确实有看过一篇还不错的，只不过记不得当时区分的详情了，我想，很多人应该也和我一样，经常被这些属性给弄晕了吧，正好结合我的测试，就来献丑了，好了，话不多说：

    话题要从文字的形式展开，大家应该知道咱们亚洲大多数国家的语言都是一些字（而不是字母）构成的，因此实在不好直接断掉，你想，一个文字断掉一半，那还是字么？字母就不然，断掉了至少你看下一行还能拼起来。。。因此这就延伸出了字符断行这个问题：

    首先讲讲 white-space:（在CJK文本和非CJK文本中表现效果一致） =====》CJK文本指的是大多数亚洲国家的文字

    笔者常使用属性：nowrap

    使用场景：常用在多余文字显示点点效果中

    常配合属性：text-overflow:ellipsis；overflow:hidden；

    作用：合并所有空白符和换行符，保证文字不换行显示

    属性分类：按照笔者个人理解，会分为3类：

        ①保守型：pre /  pre-wrap

              特点：保留所有空白符和换行符

             区分点：pre（不换行） /  pre-wrap （换行）

        ②暴力型：normal（默认值） /  nowrap

              特点：合并所有空白符和换行符

              区分点：nowrap （不换行） /  normal （换行）

        ③中立型：pre-line

              特点：合并所有空白符，但保留换行符

              pre-line是换行的

    =========================================

    这一部分，打算把word-break/word-wrap一起来讲（一般是针对非CJK文本的）

        ①word-break: break-all与word-wrap: break-word

             名字的区分实在不能帮上忙，这个需要找自己的方法区记忆属性

             按照个人语感的理解，不知道大家有没有发现不同，一个是all,一个则是word

             区分点: break-all针对所有文字换行，break-word就单独针对某个文字换行（某一个长度超长或者不正常的文字）

             效果: break-all保证所有换行，因此不会出现某一行出现一大块空白符的场景，而break-word则会突兀的在换行后带上一大片空白（如果文字很长的话）

       ②normal（默认值）

             效果相同，都按照正常的换行来进行

       ③word-break: keep-all

             效果：1.出现逗号等特殊的换行标记的地方换行

                        2.出现空白符的地方进行换行

             在CJK和非CJK文本中效果类似。

真快，又到了要结束的时刻了，希望本文能帮助大家，如有错误，希望能指正哦~~~~~~