1、单行文本溢出显示省略号
单行文本溢出显示省略号比较简单，设置white-space: nowrap避免换行，再设置text-overflow: ellipse即可。
<style>.single-line {width: 200px;line-height: 1.4;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style><div class="single-line">士为知己者死。</div><div class="single-line">世上本没有路，走的人多了，也便成了路。</div>
2、多行文本溢出显示省略号
实现的思路是先设置外层容器，限定要显示的高度。实际显示内容放到内层元素上。
1）接下来添加省略号，基于外层容器设置为绝对定位，显示在外层容器右下角。这样显示区域右下角会存在省略号。
2）添加和省略号大小一样的空白区域，基于内层元素设置为决定定位，显示在实际内容右下角。当内容未溢出时，空白会覆盖省略号。
3）前面设置完后，内容刚好能放下时，外层容器右侧会出现一小块空白。
在内容元素内部后面加上一个和省略号一个大小的空白区域。这样当内容刚好能容下时，这个空白区域会被推倒下一行，2）中的空白区域也会向下移一行，省略号得以保留。
<style>.multiple-line-wrapper, .multiple-line, .multiple-line .empty-space {display: inline-block;}.multiple-line-wrapper {display: inline-block;line-height: 1.4em;max-height: 2.6em; /* 1.4em * (N - 1) + 1em + (0.4em / 2)。N为要显示的行数，1.4em为行高 */position: relative;overflow: hidden;width: 200px;}/*==》存在小问题：1、刚好能显示下时会显示省略号2、省略号和文字交接的地方存在有一根亮黄的线*/.multiple-line-wrapper:after, .multiple-line:after {position: absolute;right: 0;bottom: 0;display: inline-block;width: 1em;height: 1.4em;background: white;}.multiple-line-wrapper:after {content: '...'; }.multiple-line {position: relative;}/*设置和省略号宽度一样。*/.multiple-line .empty-space {width: 1em;}/*要比外层的层级来得大*/.multiple-line:after { content:' ';z-index: 10;}</style><span class="multiple-line-wrapper"><span class="multiple-line">志向不过是记忆的奴隶，生气勃勃地降生。<span class="empty-space"></span></span></span><br/><span class="multiple-line-wrapper"><span class="multiple-line">志向不过是记忆的奴隶，生气勃勃地降生。但却很难。<span class="empty-space"></span></span></span><br/><span class="multiple-line-wrapper"><span class="multiple-line">志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。<span class="empty-space"></span></span></span><br/>
实际运行效果大致所示：
1）未溢出时实际效果如下，没有显示省略号。因为空白块覆盖了省略号。
2）刚刚好能显示时，实际效果如下，右下角有省略号。因为外部容器的绝对定位空白块被推到了下一行
3）溢出时，实际效果如下，右下角有省略号。
这个方案虽然能够解决，但是也存在一些小问题：
1）刚好能显示下时会显示省略号
2）省略号和文字交接的地方存在有一根亮黄的线
3）不能给外部容器.multiple-line-wrapper和内部元素.multiple-line设置padding。如果需要padding值，可以在.multiple-line-wrapper外部再嵌套元素，在嵌套元素上设置。或者用margin替代
