ヾ(ﾟдﾟ)ﾉ 注意：有限于个人技术水平，以下内容，可能不是十分准确或专业，只是基于个人理解，请大家报以评判态度，缺陷之处欢迎指正。

在容器内容宽度或高度不够的时候，就会出现文本溢出的情况，我们可以通过white-space、word-break、word-wrap等属性控制处理逻辑。

转行

# white-space

一般情况下，文本太长，容器宽度容不下的时候，浏览器会默认进行分词转行，分词逻辑：

• 英文按照空格，破折号(-)分词
• CJK(中日韩)文字则是单个拆分

如果没有其它限制，容器内容会自适应文本内容所需高度，达到刚好包裹（Wrap）文本内容的效果。

图1：设置容器宽度 高度自适应

文本宽度溢出的时候自动转行的行为可以通过white-space属性控制，white-space除了控制自动转行，同时可以控制空格符和换行符的处理逻辑，这点通过名字就可以看出来了。white-space的详细属性值如下所示：

图2：white-space 值的行为

另，如果我们要在页面中显示一段代码，我们需要保留所有格式，这时候就可以设置white-space: pre;

对图1例子，如果设置了容器的white-space属性值为nowrap，则不管文本多长，浏览器就默认一行显示。

图3：white-space: nowrap

# word-wrap 和 overflow-wrap

在图1中，我们可以看到，就算允许了浏览器自动转行，如果文本中单词过长，也可能到导致文本宽度溢出。
为了避免溢出，我们只能对单词进行拆分了。我们可以通过设置word-wrap: berak-word;。

图4：word-wrap: berak-word

word-wrap属性在CSS3规范中被重命名为overflow-wrap，考虑到兼容性问题，建议两个属性可以同时使用。

# word-break

word-break和word-wrap比较一对容易混淆的属性，同样也是控制换行过程中，单词溢出的处理逻辑。

图5：word-break: break-all
对比word-wrap: break-word;的处理效果，word-break: break-all;虽然使得文本更加紧凑得被包裹在容器中，但是处理逻辑比较简单粗暴，只要溢出就转行，不管当前是什么位置。
但是，两个属性同时设置的时候，浏览器会表现为word-break: break-all;的行为。

# 总结

浏览器处理的文本溢出的决策流程：

图6：决策流程

省略

文本内容溢出时另一种解决方案是：省略，通过设置text-overflow: ellipsis;

图7：单行省略
该属性的生效需要需要满足两个条件：

• 行内出现文本溢出
• 设置了溢出隐藏：overflow: hidden;

一般情况下，使用了省略的方式处理文本溢出，会先禁用了浏览器的自动换行，即设置white-space: nowrap；，在自动换行的情况下，也可以可能出现省略，因为单词太长导致的行内文本溢出：

图8：换行省略
codepen 代码地址
不过，这种用法一般没有什么实际用途。
另一种有用的省略方式，就是多行省略：
图9：多行省略
codepen 代码地址

这里涉及到三个属性的设置：

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

看属性前缀就知道，只能在webkit浏览器中使用，兼容性并不好：

图10：-webkit-line-clamp兼容性
关于多行省略的更多解决方案可以参考：https://css-tricks.com/line-clampin/