相信大家依稀记得有个东西叫text-overflow: ellipsis;是文本超出部分，以省略号形式表示的一个属性。
但是，我也相信大家单单用了这个东西之后，并没有什么效果。
为什么？
因为 text-overflow: ellipsis; 并不会强制“溢出”事件的发生，因此为了能让文本能够溢出容器，就需要给 text-overflow: ellipsis; 配上两个个额外的属性：overflow 和 white-space。
以以下代码为例：
<!DOCTYPE html> <html> <head> <style> div{ width: 500px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } </style> </head> <body> <div>爱学习的Akali king爱学习的Akali king爱学习的Akali king爱学习的Akali king爱学习的Akali king爱学习的Akali king</div> </body> </html>
值得一提的是，这个div如果给他设置高度，不管设置多少，从文本省略的显示角度来说，是无效的。因为以上方法，针对的仅仅是单行文本省略。
如果要实现多行文本省略，请继续往下看：
实现多行文本省略，同样的，我们需要用text-overflow: ellipsis; 配合overflow，display，
-webkit-line-clamp，-webkit-box-orient使用。
以以下代码为例：
<!DOCTYPE html> <html> <head> <style> div{ width: 500px; text-indent: 30px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } </style> </head> <body> <div>我深信世界上恐怕没有可以描写得出我现在心中悲痛的一支笔。不要说我自己这支轻易也不能动的一支。可是除此之外我更无可以泄我满怀伤怨的心的机会了，我希望摩的灵魂也来帮我一帮，苍天给我这一霹雳直打得我满身麻木得连哭都哭不出来，浑身只是一阵阵的麻木。几日的昏沉直到今天才清醒过来，知道你是真的与我永别了。摩！漫说是你，就怕是苍天也不能知道我现在心中是如何地疼痛，如何地悲伤！从前听人说起“心痛”，我老笑他们虚伪，我想人的心怎会觉得痛，这不过说说而已，谁知道我今天才真的尝到这一阵阵心中绞痛似的味儿了。</div> </body> </html>
效果图：
小结：
-webkit-line-clamp: 5; 表示显示5行
-webkit-box-orient: vertical; 从上到下垂直排列子元素
display: -webkit-box; 将对象作为弹性盒子模型显示。
white-space: nowrap; 溢出不换行
text-overflow: ellipsis; 文本溢出用省略号表示
overflow：hidden； 溢出隐藏
