关于文本超出后展示省略号（单行与多行情况）实现方案及-webkit-line-clamp介绍

1.单行

主要用到的css属性 text-overflow：ellipsis

text-overflow: clip | ellipsis | string; clip：修剪文本 ellipsis：显示省略符号来代表被修剪的文本 string：使用给定的字符串来代表被修剪的文本 例:

   overflow: hidden;//超出部分隐藏
   text-overflow:ellipsis;//超出部分显示省略号
   white-space: nowrap;//规定段落中的文本不进行换行
   width: 200px;//需要给定

即可实现单行文本超出后显示省略号

2.多行

单行实现很容易，多行实现需要利用 -webkit-line-clamp 把容器内容限制为指定行数，并且需要在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient (en-US) 属性设置成 vertical时才有效果

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow，显示省略符号来代表被修剪的文本 string：使用给定的字符串来代表被修剪的文本 例:

   overflow: hidden;//超出部分隐藏
   text-overflow:ellipsis;//超出部分显示省略号
   white-space: nowrap;//规定段落中的文本不进行换行
   width: 200px;//需要给定
   -webkit-line-clamp: 2;//限制展示两行
   display: -webkit-box; //必须结合的属性
   -webkit-box-orient: vertical; //必须结合的属性

至此，多行文本超出展示省略号就实现了