摘要：英文换行来到英文，情况就要复杂一些。在英文中有单词的概念，所以在换行时就得考虑单词的完整性。上面介绍的值，主要也是针对英文的，汉字还是按照浏览器的默认行为，装不下就换行。最后显示时，英文还是按照默认行为，中文变成了不换行。
上一篇博客中介绍white-space属性时聊到了换行，这一篇介绍换行的细节。
浏览器的默认行为浏览器的换行行为，对于中文和英文存在一些差别。
中文换行正如上一篇博客中所说的，中文换行比较简单，这一行放不下就换行。除了中文之外，韩文和日文的处理也是一样的。这三种文字合在一起就是MDN介绍word-break属性时所说的CJK（Chinese, Japanese, Korean的缩写）。
英文换行来到英文，情况就要复杂一些。在英文中有单词的概念，所以在换行时就得考虑单词的完整性。
浏览器按照空格来识别单词，默认情况下，浏览器不会在单词内换行
thisisalonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword
我们在p标签内部放了一些英文字母，这些字母之间并没有用空格来分隔开来，这就像文言文没有用标点符号断句一样。所以，就如同你看不懂没有断句的文言文，浏览器也看不懂没有用空格分隔的英文。于是浏览器在处理时，就会把这一长串英文只是当成一个很长很长的单词，只有一个单词也就不会换行，因为默认的换行只会在单词之间。
当一行放不下时，浏览器会尝试把最后一个单词放到下一行，如果下面这一整个空行还是放不下这个单词，那么就会任由这个单词超出容器，反正默认情况下浏览器是不会把单词拆开的。
this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword
最后显示时，就会把后面这个长单词放到下一行，然后任由其超出容器：
word-break属性从上面的两点看到，浏览器已经在很努力的换行，从而尽量让文字不要超出容器了。但即使是这样，对于较小的容器中存放的长单词，当整个一行还放不下一个单词是，浏览器也是无能为力，毕竟浏览器要保证单词的完整性，不敢随随便便把一个单词给拆了。但是，word-break属性就赋予了浏览器拆单词的权力。
word-break:normal：这是默认值，也就是浏览器的默认行为
word-break:break-all：能把all都break掉，所有的东西都能拆，所以，单词随便拆
this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword
这样浏览器在排版时，就完全可以把字母当成拆分单位，一个字母一个字母的往上放，放不下时就把字母放到下一行。可以理解成，此时就没有单词的概念了，只有字母。
![word-break:break-all]][3]
word-break:keep-all：上面在介绍浏览器的默认行为时，CJK字符和英文是分开，之所以这样，是因为word-break属性对于中英文的行为也是分开的。上面介绍的break-all值，主要也是针对英文的，汉字还是按照浏览器的默认行为，装不下就换行。对于中文来说，没有拆分不拆分，只有换行不换行。keep-all就是让中文不要换行，此时英文还是按照浏览器的默认行为来。
this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword 这是中文这是中文是中文这是中文这是中文这是中文是中文这是中文这是中文这是中文是中文这是中文这是中文这是中文是中文这是中文这是中文这是中文是中文这是中文这是中文这是中文是中文这是中文这是中文这是中文是中文这是中文
注意这里我在中英文之间加了个空格，否则浏览器会把后面的中文页当成是英文单词的一部分。最后显示时，英文还是按照默认行为，中文变成了不换行。
word-break:break-word：在MDN上，只会介绍前面三个属性，因为只有前三个才是标准的，而break-word是非标准的。如果一定要使用这个值，就需要注意下浏览器的兼容性，其最后显示的效果，跟下面介绍的word-wrap:break-word基本一致，这里不再多说，看下面吧。
word-wrap属性word-break:break-all在拆英文单词时，细看一下，当longlonglon...longword这个单词在第一行末尾放不下时，其实是分了两步：
以字母为单位处理，尽量将这个长单词的字母往第一行放，能放多少放多少
后面连单个字母都放不下时，再换行，放其他字母。
而word-wrap:break-word则不同，他会首先直接换行，放单词，第二行放不下，再拆单词
this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword
与上面的word-break:break-all的图对比一下就明白了，拆单词也是拆单词，只不过我先换到下一行再拆。
另一个属性值是word-wrap:normal，这就是默认值，对应浏览器的默认行为。
word-break与word-wrap很容易弄混，所以在CSS3中，word-wrap已经改成了overflow-wrap，不过考虑兼容性，还是用word-wrap的比较多。
总结一下word-break:break-all与word-wrap:break-word这两个属性，都是考虑拆英文长单词的，但是拆分的方法有点不一样。另外word-break:keep-all还可以控制中文。其实想想，还是中文的事少，没有拆分的顾虑，只用考虑换行不换行就可以了。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116373.html
摘要：一个长单词超出整个容器宽度时是否换行必须注意到，这是一个长单词便超出容器宽度的情况，而且只需考虑英文，中文没有此特性。规定如何处理内容溢出容器属性作用于型元素上。 前言 文本方面的CSS内容不少，但只要是用过一下office word来编辑过文章的童鞋都能轻易理解其中的大部分。那么，今天仅仅来谈谈其中最复杂的部分——文本格式。 处理换行、空格和Tab：white-space 众所周知，...
摘要：理解和的区别从易于区分和理解的角度，我引用了无双在你真的了解和的区别吗一文中对两个属性作用的解释属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 white-space 、 word-wrap 和 word-break 是决定段落中的文本如何展示的3个css属性，属性说明请点击链接查看参考手册。 white-space wh...
摘要：文本换行其实是个非常常用但并不起眼的特性。在中日韩文情况下，和有区别，见下图中日韩文情况下，仍旧等于没有设，浏览器选择在文字或标点符号处换行。但设成后，将不再允许断词哪怕是中日韩文，只能像英语系一样根据半角空格或标点来换行。 文本换行其实是个非常常用但并不起眼的特性。你什么都不用设，浏览器自动就会换行。例如英语，浏览器会根据容器尺寸，选择在半角空格或连字符处换行。例如中文，浏览器会选择...
阅读 1371·2023-04-26 03:04
阅读 2212·2019-08-30 15:44
阅读 3709·2019-08-30 14:15
阅读 3453·2019-08-27 10:56
阅读 2653·2019-08-26 13:53
阅读 2593·2019-08-26 13:26
阅读 3042·2019-08-26 12:11
阅读 3577·2019-08-23 18:21
