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

1、单行文本溢出显示省略号

单行文本溢出显示省略号比较简单，设置white-space: nowrap避免换行，再设置text-overflow: ellipse即可。

	
    
    

      士为知己者死。
	
	

      世上本没有路，走的人多了，也便成了路。
	

2、多行文本溢出显示省略号

实现的思路是先设置外层容器，限定要显示的高度。实际显示内容放到内层元素上。
1）接下来添加省略号，基于外层容器设置为绝对定位，显示在外层容器右下角。这样显示区域右下角会存在省略号。
2）添加和省略号大小一样的空白区域，基于内层元素设置为决定定位，显示在实际内容右下角。当内容未溢出时，空白会覆盖省略号。
3）前面设置完后，内容刚好能放下时，外层容器右侧会出现一小块空白。
    在内容元素内部后面加上一个和省略号一个大小的空白区域。这样当内容刚好能容下时，这个空白区域会被推倒下一行，2）中的空白区域也会向下移一行，省略号得以保留。

	
	
	  
	   志向不过是记忆的奴隶，生气勃勃地降生。
	   
	  
    
	

	
    
	  
	   志向不过是记忆的奴隶，生气勃勃地降生。但却很难。
	   
	  
    
	

	
    
	  
	   志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。
	   
	  
    
	

 

实际运行效果大致所示：
1）未溢出时实际效果如下，没有显示省略号。因为空白块覆盖了省略号。

2）刚刚好能显示时，实际效果如下，右下角有省略号。因为外部容器的绝对定位空白块被推到了下一行

3）溢出时，实际效果如下，右下角有省略号。

这个方案虽然能够解决，但是也存在一些小问题：
 1）刚好能显示下时会显示省略号
 2）省略号和文字交接的地方存在有一根亮黄的线
 3）不能给外部容器.multiple-line-wrapper和内部元素.multiple-line设置padding。如果需要padding值，可以在.multiple-line-wrapper外部再嵌套元素，在嵌套元素上设置。或者用margin替代