在网页上我们经常看到如下图的文本省略的显示方式，那么是如何做到这种效果的呢？要想解决这个问题，我们先要了解文字溢出隐藏。
word-break：自动换行
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
主要处理英文单词
white-space
white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
normal : 为默认处理方式
nowrap : 为强制在同一行内显示所有文本，直到文本结束或者遇到br标签对象才换行。
可以处理中文
overflow:溢出
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
text-overflow ：文字溢出
text-overflow : clip | ellipsis
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出
clip : 不显示省略标记（...），而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记（...）
文本以省略号隐藏
从上面我们可以得出结论，如果要实现这个功能必须满足三个条件：
1.white-space：nowrap 文本强制一行内显示
2.overflow：hidden 文本溢出裁剪
3.text-overflow：ellipsis 文本溢出时显示省略标记