默认换行行为
前提：固定宽度的盒子
中文会自动换行 ，英文数字遇空格换行 如下图：
CSS 为我们提供了一些和文本换行相关的属性；
- overflow-wrap
- word-break
- white-space
- line-break
- hyphens
一、overflow-wrap
作用：告诉浏览器，内容超出容器边界时是否允许换行。其属性值主要有以下三种：
overflow-wrap: normal | break-word | anywhere
1、normal
允许内容顶开或溢出指定的容器边界，遇空格换行。
2、break-word anywhere
当宽度设置为固定的值，两者表现是一致的。如果在这一行剩余位置显示单词，会导致溢出时，浏览器会中断该单词
区别：当 width:min-content; 时
(min-contetn：如果不给元素一个具体的height,它就会自动适应内容的高度。假如我们希望width也具有同样的类似行为, 可以用这个属性)
二、word-break
作用：用于指定怎样在单词内进行断行
word-break：normal | break-all | keep-all
三、white-space
作用：用来设置如何处理元素中的空白
white-space: normal | nowrap | pre | pre-wrap | pre-line
- nowrap：不换行，常用来实现超出…的效果
- pre: 保留所有的空格和回车，且不允许折行。
浏览器会自动压缩空格，文字的前后空格都会忽略，内部连续空格只有自作一个
如图：
如果不自动压缩空格，那我们写html的时候就只能写成1行了，否则先这样的代码就会出现大段的空白。
<div>
<span>
</span>
</div>
- pre-wrap: 保留所有的空格和回车，但是允许折行。
- pre-line: 会合并空格，且允许折行
四、line-break
作用：来处理如何断开带有标点符号的中文、日文或韩文文本的行。简而言之，该属性可以用来处理过长的标点符号
总结
浏览器默认是以单词为单位进行换行的，单词不可拆分，挤不下会另起一行；一个汉字为一个单词；连续的字母或数字看做一个单词
附加符号
作用：添加在字母上面的符号，以更改字母的发音或者以区分拼写相似词语。
例如汉语拼音字母“ü”上面的两个小点，或“á”、“à”字母上面的标调符。变音符号可以放在字母的上方或下方，也可以放在其他的位置。当多个附加符号叠加的时候，就形成了看起来像乱码的符号。
参考
