[分享]css两行自动省略兼容ie8

CSS的两行自动省略对于显示不完全的文本或标题是很有用的。但是在一些老版本的浏览器中，比如IE8，这个特性可能不被支持。.lineclamp { display: webkitbox; webkitl...

CSS的两行自动省略对于显示不完全的文本或标题是很有用的。但是在一些老版本的浏览器中，比如IE8，这个特性可能不被支持。

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 以下是兼容IE8的代码 */
  display: block;
  display: -webkit-box; 
  display: -moz-box; 
  -moz-box-orient: vertical; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  box-sizing: content-box; 
  -ms-box-sizing: content-box; 
  -o-box-sizing: content-box; 
  -webkit-box-sizing: content-box; 
  -moz-box-sizing: content-box; 
} 

以上代码中的.line-clamp类使用了display、-webkit-line-clamp、-webkit-box-orient、overflow和text-overflow这些CSS属性来实现两行自动省略的效果。但是为了兼容IE8，我们需要加入一大段兼容性代码，使得代码更加冗长。

总的来说，如果你需要使用两行自动省略的效果，并且需要兼容IE8，你就需要同时使用display、-webkit-line-clamp、-webkit-box-orient、overflow、text-overflow和box-sizing等属性，并写入相应兼容性代码。这些细节上的差异，会为前端的开发工作带来一些难度。