ヾ(ﾟдﾟ)ﾉ 注意：有限于个人技术水平，以下内容，可能不是十分准确或专业，只是基于个人理解，请大家报以评判态度，缺陷之处欢迎指正。
在容器内容宽度或高度不够的时候，就会出现文本溢出的情况，我们可以通过white-space、word-break、word-wrap等属性控制处理逻辑。
转行
# white-space
一般情况下，文本太长，容器宽度容不下的时候，浏览器会默认进行分词转行，分词逻辑：
- 英文按照空格，破折号(-)分词
- CJK(中日韩)文字则是单个拆分
如果没有其它限制，容器内容会自适应文本内容所需高度，达到刚好包裹（Wrap）文本内容的效果。
文本宽度溢出的时候自动转行的行为可以通过white-space属性控制，white-space除了控制自动转行，同时可以控制空格符和换行符的处理逻辑，这点通过名字就可以看出来了。white-space的详细属性值如下所示：
另，如果我们要在页面中显示一段代码，我们需要保留所有格式，这时候就可以设置
white-space: pre;
对图1例子，如果设置了容器的white-space属性值为nowrap，则不管文本多长，浏览器就默认一行显示。
# word-wrap 和 overflow-wrap
在图1中，我们可以看到，就算允许了浏览器自动转行，如果文本中单词过长，也可能到导致文本宽度溢出。
为了避免溢出，我们只能对单词进行拆分了。我们可以通过设置word-wrap: berak-word;。
word-wrap属性在CSS3规范中被重命名为overflow-wrap，考虑到兼容性问题，建议两个属性可以同时使用。
# word-break
word-break和word-wrap比较一对容易混淆的属性，同样也是控制换行过程中，单词溢出的处理逻辑。
对比
word-wrap: break-word;的处理效果，word-break: break-all;虽然使得文本更加紧凑得被包裹在容器中，但是处理逻辑比较简单粗暴，只要溢出就转行，不管当前是什么位置。但是，两个属性同时设置的时候，浏览器会表现为
word-break: break-all;的行为。
# 总结
浏览器处理的文本溢出的决策流程：
省略
文本内容溢出时另一种解决方案是：省略，通过设置text-overflow: ellipsis;
该属性的生效需要需要满足两个条件：
- 行内出现文本溢出
- 设置了溢出隐藏：
overflow: hidden;
一般情况下，使用了省略的方式处理文本溢出，会先禁用了浏览器的自动换行，即设置white-space: nowrap；，在自动换行的情况下，也可以可能出现省略，因为单词太长导致的行内文本溢出：
codepen 代码地址
不过，这种用法一般没有什么实际用途。
另一种有用的省略方式，就是多行省略：
codepen 代码地址
这里涉及到三个属性的设置：
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
看属性前缀就知道，只能在webkit浏览器中使用，兼容性并不好：
关于多行省略的更多解决方案可以参考：https://css-tricks.com/line-clampin/
