你真的了解css中的换行吗

关于css中换行的一些学习

在介绍之前我们先来看一下浏览器默认情况下文本的超出容器的处理情况：
案例展示： https://codepen.io/qwguo88/full/RZMQgB
通过上边的例子可以看出：
连续的数字不会自动换行；
连续的字母不会自动换行；
英文文章中空格是由   代码实现的空格不会换行；
英文单词不会在中间换行，在单词中间到达容器边缘，此单词会另起一行显示。
中文不会在文字和标点符号间换行，如果遇到标点符号到达容器的边缘，那么标点符号的前一个字会跟着折下来。
容器中是连续的图片的话会自动换行显示。
我们在处理一些文本超过容器的时候换行的问题。一般我们处理换行的css属于主要用到：
word-break

用于设置浏览器处理自动换行的方式
word-break：normal | keep-all | break-all | break-word；
字面理解：word单词的意思，break打破、间断的意思。连起来得意思就好理解了：单词和文本之间的间断方式。 
normal：默认值，表示使用浏览器的默认的换行规则，依照亚洲语言和非亚洲语言的文本规则，允许在句内换行。
keep-all：表示保持单词和句子的完成性，也就是说，英文中不会再单词内换行，中文不会在非标点符号内换行。 
查看实例：https://codepen.io/qwguo88/full/eYpKjqO 
 个人测试：连续字母和数字不会自动折行
 firefox 27.01版本的支持此属性。会使中文保持不换行，一直在一行显示。只有输入
强直换行，对英文貌似不起作用。
 Ie6-11，利用ie11的调试模式进行测试的，对中文只有遇到标点符号后，后边的文字才能自动折行。
 Chrome、Safari，对此属性不起作用，文字和normal效果一样，文字到容器边缘自动换行，单不会在标点符号内换行。 
break-all：(中断全部的) 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行。 
查看实例：https://codepen.io/qwguo88/full/YzyvjJZ 
break-word：属性和下边的 overflow-wrap:break-word表现差不多，唯一的区别在表格连续英文字符串换行上，前者可以让表格单元格中的连续英文自动换行，后者不行。 
 个人测试：连续的字母和数字会自动折行
 Firefox,chrome,safari等浏览器在中文和英文状态下显示效果一样当内容到达容器边缘都允许在标点符号和单词中间换行，允许标点符号在行首。
 Ie6-11，等浏览器在中文和英文状态下显示效果一样当内容到达容器边缘也是允许单词和句子中间换行，但是他不允许标点符号在行首显示，如果内容到达边缘后第二行行首刚好是标点符号，他会让上一个单子尾字母或中文的汉子跟随标点符号一起换行。 
word-wrap 和 overflow-wrap
 
 这个属性是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。
 这里放到一起介绍的是因为 word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 Chrome 和 Opera 浏览器都支持这种新语法。 
/* old */
word-wrap：normal | break-word；
/* new */
overflow-wrap: normal | break-word | anywhere;
normal：默认值，允许内容顶开或溢出指定的容器边界，也就是长单词不换行
break-word：在单词中间换行，当单词的长度超出了容器的长度是会在单词中间截断换到下一行显示。
anywhere： 
 Web-kite,和ie各浏览器显示效果一样，允许连续的字母和数字等内容到达容器边缘后强直换行，和word-break:break-all的区别在于，word-wrap:break-word;不允许在英文单词间换行、标点符号在行首。word-break:break-all则允许英文单词间分开单词换行、标点符号在行首显示。但是ie下标点符号在行首显示不起作用。 
案例展示：https://codepen.io/qwguo88/full/ExVpgxj 
如果要在表格下让连续的字母或数字换行，使用word-break:break-all;可以达到换行目的但是相应的单词和标点符号会在中间折行。使用word-wrap:break-word;不起作用。解决方法是给表格定义table-layout:fixed;
 提示： 
 当然在元素中使用了white-space:pre/nowrap的话，word-wrap:break-wrap和word-break:break-word;都将失去作用，使中文，英文都在同一行显示，不会换行.
 在换行中有时还会涉及到：设置或检索对象内空格的处理方式。 
white-space
 
 用于设置元素对象内空格的处理方式 
white-space: normal | pre | nowrap | pre-wrap | pre-line | break-spaces；
取值说明： 
normal：浏览器的默认处理方式 连续的空白符会被合并，换行符会被当作空白符来处理 文本自动换行。
pre： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行，在遇到换行符或者<br>元素时才会换行。
nowrap：强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。
break-spaces： 
案例展示：https://codepen.io/qwguo88/full/veZQvO 
当white-sace设置成nowrap的时候word-break和word-wrap设置换行的将都不生效。
 当white-space设置成pre的时候word-break换行将不生效。word-wrap换行仅对文字和字符生效如果容器中是图片的话，图片将不换行。块级元素和行内块级元素显示效果一样。
                                    white-space 属性可以控制元素中文本的换行方式。word-break 属性可以控制单词在换行时的断开方式。：允许在单词内部断行，例如超出容器宽度时会将单词拆分为多行显示。（默认值）：文本自动换行，默认情况下会根据容器的大小自动换行。：保留原始的空白符（空格和换行符），文本按照源码中的格式显示。：保留原始的空白符，文本在遇到边界时会自动换行。：合并连续的空白符，文本在遇到边界时会自动换行。：尽量保持多字母语言的连续性，适用于东亚语言。：文本不进行换行，超过容器宽度时会溢出。
                                    允许在单词内换行(不会尝试把长单词挪到下一行，而是直接就进行单词内的断句。挪到下一行，看看下一行的宽度够不够，不够的话再进行单词内的断句。设置或检索当内容超过指定容器的边界时是否断行。如果不允许的话，长单词就会溢出。强制换行(决定是否允许。的一点是它还是会首先。
                                    一般情况下，元素拥有默认的white-space:normal（自动换行，不换行是white-space:nowrap）,当录入的文字超过定义的宽度后会自动换行，但当录入的数据是一堆没有空格的字符或字母或数字（常规数据应该不会有吧，但有些测试人员是会这样子做的），超过容器宽度时就会把容器撑大，不换行。例如英语，浏览器会根据容器尺寸，选择在半角空格或连字符处换行。在页面中出现大段的文字，通常采用分段进行规划，对换行也有极其严格的划分。normal : 　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
                                    本文将详细介绍一些常用的CSS设置换行的方法，并提供相应的源代码示例。通过上述方法，你可以根据具体需求选择适合的CSS属性来实现文本的换行效果。希望这些示例代码能够帮助你更好地掌握CSS设置换行的方法。如果有任何疑问，请随时提问。"white-space"属性用于控制元素内空白字符的处理方式，其中包括换行符。"overflow-wrap"属性用于控制文本在容器边界处的换行方式。"word-wrap"属性用于控制长单词或URL地址的换行方式。"word-break"属性用于控制非中日韩文本的换行方式。
一、文本基本属性
white-space: normal  | pre  | nowrap |  pre-wrap  |  pre-line  |  inherit; 规定段落中的文本如何换行
normal：默认。空白会被浏览器忽略。
pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre>标签。
nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br>标签为止。
Pre-wrap:：保留空白符序列，但是正常地进行换行。
Pre-l
                                    欢迎和号主【前端点线面】进群盘算法，此外本号干货满满：14个门类（100+篇原创）内容（又干又硬）、《前端百题斩》pdf（助力薪资double）、20+篇思维导图（知识系统化、记忆简单化），进摸鱼群。今天来研究一下 CSS 中的文本换行。正常情况下，在固定宽度的盒子中的中文会自动换行。但是，当遇到非常长的英文单词或者很长的URL时，文本可能就不会自动换行，而会溢出所在容器...