css 换行 word-wrap word-break white-space 图文详解

基础代码

浏览器默认样式

浏览器默认值：word-wrap:normal(不断词，超长溢出)；
                         word-break:normal(以英文单词为单位换行，连续字符不换行，直接溢出父元素)
                         white-space:normal(只在块级元素有属性值。空白符和换行符会被浏览器忽略)

CJK(中日韩亚洲字体)
断词 -->断的 英文单词啊 CJK也断不了啊

word-wrap: 是否允许浏览器断词，防止字符串太长而溢出。
（css3 规范里把 word-wrap 用 overflow-wrap 重命名了，目前浏览器支持不太友好，建议用word-wrap）
        normal: 只在允许的断字点换行，不会断词，超长则溢出 (浏览器默认处理)
        break-word :(CJK无影响)英文单词是否能放在同一行不溢出，不行单词就换行，而换行后单词若溢出，断词。（连续标点符号也会断）

word-wrap: break-word;

word-break: 属性用来标明怎么样进行单词内的断句。
        normal：使用浏览器默认的换行规则——（以英文单词为单位换行，连续字符不换行，直接溢出父元素）
        break-all:允许在单词内换行，到边界就换，（连续的标点符号不断）

word-break: break-all;

        keep-all:只能在半角空格或连字符处换行，CJK不换行，Non-CJK文本表现同normal
                      浏览器支持不友好，并且IOS下支持也不友好，还是不要用在移动端

word-break: keep-all;

        * break-word:先以单词为单位换行，单词太长就断词。（部分浏览器支持, 对，你没猜错，就是IE不支持） 发现没，word-break：break-word 的效果和word-wrap：break-word 一模一样！！！那还是用word-wrap:break-word 好一点。（但是为什么是从‘叶’断，而不是‘子’断？母鸡了。。。好奇）

word-break: break-word;

white-space：属性设置如何处理元素内的空白符/换行符
        normal：默认（只在块级元素）。空白符和换行符会被浏览器忽略（若要显示多个空白符，用 代替空格键）
        pre: 空白符和换行符会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。

white-space: pre;

        nowrap: 文本不会换行，文本会在同一行上继续，直到遇到 br 标签为止。

white-space: nowrap;

        pre-wrap: 连续的空白符被保留，正常地进行换行。

white-space: pre-wrap;

        pre-line: 连续的空白符被合并，正常地进行换行。

white-space: pre-line;

        break-spaces：就是可以从空白符之间换行，所有空白符都被保留，包括行尾

white-space: break-spaces; 这里特意加了连续空格

        inherit: 规定应该从父元素继承 white-space 属性的值。

以上说的都是块级元素，如果行内块需要用，就转成行内块。

总结：
word-wrap:我的框宽度不够，塞不下，文本单词/连续符号 能不能拦腰截断
normal:不断，
break-word：放不下就只好断喽
word-break:外面的框不够宽，我要怎么摆放我的灵魂
normal：连续符号/单词 太伟岸，不断
break-all:绝不出轨，安分守己（连续符号不同意）
keep-all：我是傲娇又难伺候的存在，考虑好后果再来招惹我
break-word:上面找我兄弟去！
white-space：上面两个，这里我说了算啊
对，他说了算，如果他不让换行（nowrap）,那就一条大路走到头，换行不存在！！
pre：( preserve:保留 ) 空白/换行 我要保留
wrap：你保留，我换行
line：就保留一个吧，换行我同意

菜鸟一只，欢迎指正，期待点赞