概要
这篇专题描述一些在固定宽度容器内的文本换行和超出省略问题。对于百度上经常能看到的为什么p标签没有自动换行问题，这篇专题会给你解答。
实现强制换行
我们需要知道，浏览器默认情况下对于p标签内文字的换行处理是采用的word-break: normal;这个样式。
这个默认样式对于中文段落倒也没什么影响，会正常的换行。但是如果段落中包含一个很长的单词，最常见的是url（如：devteamwikitest.rightknights.com/pages/viewp…），对于url这样的长英文字母组合，浏览器只会把它当做一个很长的单词而已。
对于单词，word-break: normal;的处理是：如果在原本的一行内无法容纳下这个单词，它就会另起一行展示这个单词，并且如果单词过长，新的一行也无法容纳下，该单词还不会换行，它会超出这个容器的宽度并完整显示。通过下面一张图来理解这个现象：
如何解决这个问题？方案是使用推荐的word-break: keep-all;样式去处理换行问题，它会很好的处理中文段落中包含长英文单词时不恰当的换行以及文本超出容器宽度问题。
Note：容器的宽度需要固定，否则这个问题在多数场景下没有意义，因为屏幕宽度足够宽。
关于word-break这个css属性的详细特性说明，请参阅 MDN关于work-break的描述
实现单行文本超出省略
overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容）
white-space: nowrap；（设置文字在一行显示，不能换行）
text-overflow: ellipsis；（规定当文本溢出时，显示省略符号来代表被修剪的文本）
多行文本省略（只支持webkit内核）
-webkit-line-clamp: 2；（用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。 为了实现该效果，它需要组合其他的WebKit属性）
display: -webkit-box；（和 1 结合使用，将对象作为弹性伸缩盒子模型显示 ）
-webkit-box-orient: vertical；（和 1 结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 ）
overflow: hidden；（文本溢出限定的宽度就隐藏内容）
text-overflow: ellipsis；（多行文本的情况下，用省略号“…”隐藏溢出范围的文本)
