css中word-break和word-wrap用法详解

css中的word-break和word-wrap属性在遇到中文和英文时的表现是不一样的，所以我们会在这些属性遇到中文、英文时分别进行说明。
常用于换行

 word-wrap: break-word;
 word-break: break-all;

    word-break: normal; // 此值为浏览器的默认属性：以单词为单位；  keep-all 这个值由于兼容性差，很少用；

    word-wrap: normal; // 此值为浏览器的默认属性：以单词为单位；

    纯中文：自动换行，一个汉字看做一个单词；

    纯英文或纯数字：看做一个单词，不换行；

    遇到英文空格或者换行符：会换行；

    遇到英文单词和英文空格：在空格处换行且不会断单词；

     word-break: break-all; // 此值表示 单词也要换行，都要换行；

    纯中文：自动换行，一个汉字看做一个单词；        

    纯英文或纯数字：直接把单词截断换行；      

    遇到英文空格或者换行符：会换行；

    遇到英文单词和英文空格：在空格处换行截断单词；

    word-wrap: break-word; // 此值表示 纯单词超过长度会截断换行，其他的单词不会；

    纯中文：自动换行，一个汉字看做一个单词；

    纯英文或纯数字：直接把单词截断换行；

    遇到英文空格或者换行符：会换行；

    遇到英文单词和英文空格：在空格处换行不截断单词；

    根据word-break和word-wrap属性的一些特点，我们做了如下总结：

    1：浏览器默认是以单词为单位进行换行的，单词不可拆分，挤不下会另起一行；一个汉字为一个单词；

    2：word-break: break-all 此值表示 超出的时候都要换行，是单词要拆分；

    3：word-wrap: break-word 此值表示 如果一个单词超出行长度，要截取换行，其他默认；

    4：word-break: normal; word-wrap:normal 此值表示 浏览器的默认行为，也就是第 1 点；