css两行自动省略兼容ie8

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

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

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等属性,并写入相应兼容性代码。这些细节上的差异,会为前端的开发工作带来一些难度。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两行自动省略兼容ie8

粉丝

0

关注

0

收藏

0

已有0次打赏