css多行省略号兼容性

CSS中的省略号往往用于在卡片或列表中截断文本。相比于截断后直接隐藏，使用省略号可以提供更好的用户体验。但是，如果省略号需要在多行文本中使用，就要考虑到兼容性问题。

	.ellipsis {
	  display: -webkit-Box;
	  -webkit-Box-orient: vertical;
	  -webkit-line-clamp: 3;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}

通常情况下，使用以上代码可以在单行文本中实现省略号的效果。但是，当文本内容为多行时，不同浏览器的处理方式也不尽相同。

在Chrome和Safari中，多行省略号可以通过设置-webkit-line-clamp的值来实现。但是，这种做法违反了CSS标准。相比之下，Firefox和IE更加注重遵从标准，不支持这种写法。他们会尝试按照标准将每一行文本裁剪，并在最后一行加上省略号。

为了兼容各个浏览器，我们可以使用CSS3的多列布局来实现多行文本的省略号效果。具体代码如下：

	.ellipsis {
	  display: block;
	  display: -webkit-Box;
	  max-height: 80px;
	  margin: 0;
	  font-size: 14px;
	  text-align: justify;
	  line-height: 1.6;
	  -webkit-line-clamp: 4;
	  -webkit-Box-orient: vertical;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  Box-sizing: border-Box;
	  -moz-Box-sizing: border-Box;
	  -webkit-Box-sizing: border-Box;
	}
	.ellipsis::before {
	  content: '...';
	  float: right;
	  margin-left: -12px;
	  margin-top: -14px;
	}
	.ellipsis::after {
	  content: '';
	  display: inline-block;
	  width: 12px;
	  height: 24px;
	}

这段代码的核心就是通过设置max-height和列数来实现多行文本的截断。这种方式在各个浏览器中都可以稳定地运行，并且提供了更好的用户体验。