纯CSS实现多行文本溢出显示省略号（兼容不同浏览器）

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替代