火狐浏览器-webkit-line-clamp兼容问题

问题描述：
firefox68及68以上版本支持-webkit-line-clamp属性
兼容firefox各个版本方案：

如果某个元素同时存在line-clamp和other-line-clamp两个类，那么other-line-clamp中一定要增加：

display: block !important;

/*chrome 浏览器实现 ...*/
.line-clamp {overflow: hidden; /** 隐藏超出的内容 **/word-break: break-all;text-overflow: ellipsis; /** 多行 **/display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/-webkit-line-clamp: 2; /** 显示的行数 **/box-sizing: border-box;
}/* 非chrome 实现...*/
.other-line-clamp {position: relative;display: block !important;font-size: 16px;line-height: 23px;overflow: hidden;box-sizing: border-box;
}/* 占位*/
.other-line-clamp::before {content: "";float: left;width: 30px;height: 100%;box-sizing: border-box;
}/* 内容部分*/
.other-line-clamp .fd-line-clamp-text {position: relative;z-index: 1;float: right;margin-left: -30px;width: 100%;min-height: 23px;box-sizing: border-box;
}/* ... 占位*/
.other-line-clamp::after {content: "\02026";float: right;position: relative;left: 100%;z-index: 2;margin-top: 0;padding-left: 10px;width: 30px;height: 23px;font-size: 16px;box-sizing: border-box;font-family: "Avenir", Helvetica, Arial, sans-serif;transform: translate(-100%, -100%);background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 100%);background: -ms-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 100%);
}

下面是实例↓

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="form-table-line-clamp other-line-clamp" style="height: 46px;" data-ellipsis="true"><span class="table-td-text line-clamp-text">一旦使用new关键一旦使用new关键字为数组分配了内存空间字为数组分配了内存空间</span>
</div>
</body>
</html>

.form-table-line-clamp {width: 200px;font-size: 16px;line-height: 20px;border: 1px solid #000;box-sizing: border-box;
}/*chrome 浏览器实现 ...*/
.line-clamp {overflow: hidden !important; /** 隐藏超出的内容 **/word-break: break-all;text-overflow: ellipsis !important; /** 多行 **/display: -webkit-box !important; /** 对象作为伸缩盒子模型显示 **/-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/-webkit-line-clamp: 2; /** 显示的行数 **/box-sizing: border-box;
}/*// 非chrome 实现...*/
.other-line-clamp {position: relative;display: block !important;font-size: 16px;line-height: 23px;overflow: hidden;box-sizing: border-box;
}/*// 占位*/
.other-line-clamp::before {content: "";float: left;width: 30px;height: 100%;box-sizing: border-box;
}/*// 内容部分*/
.other-line-clamp .line-clamp-text {position: relative;z-index: 1;float: right;margin-left: -30px;width: 100%;min-height: 23px;box-sizing: border-box;
}/*// ... 占位*/
.other-line-clamp::after {content: "\02026";float: right;position: relative;left: 100%;z-index: 2;margin-top: 0;padding-left: 10px;width: 30px;height: 23px;font-size: 16px;box-sizing: border-box;font-family: "Avenir", Helvetica, Arial, sans-serif;transform: translate(-100%, -100%);background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 100%);background: -ms-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 100%);
}

火狐浏览器-webkit-line-clamp兼容问题相关推荐

火狐浏览器的全屏兼容问题 allowfullscreen=true
一般开发后台系统都用到 iframe 来嵌套内容区域, <iframe allowfullscreen="true" .... 加上allowfullscreen=" ...
FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条
问题一:最简单的鼠标移过手变型的css要改了 cursor:pointer;/*FireFox(火狐)不支持cursor:hand*/ dw8下面自动出来的也没有hand这个属性了,标准的是point ...
如何让火狐浏览器兼容window.event
遇到一个问题,火狐不兼容window.event,之前代码解决是通过这种方式解决的. 如下(无参数方式): unction _test2() { var evt = window.event || a ...
火狐浏览器不兼容event问题
除了Chrome浏览器,其他浏览器不兼容event. eg: 1 <a @click="test(event)"> 如上方法,火狐浏览器会报event is not u ...
如何下载安装与火狐浏览器不兼容的火狐浏览器插件
首先我们在火狐的插件仓库里寻找自己需要的插件点我进入插件仓库我们可以看到这个插件和火狐浏览器当前版本不兼容,它不允许我们下载了,其实我们只要点击我标出的按钮,进入下一个页面进入页面审查元素 ...
滚动条兼容火狐浏览器
滚动条兼容火狐浏览器滚动条距离顶部距离 let ele=document.getElementById("demo") console.log(ele.scrollTop) 滚定 ...
pageoffice在Edge浏览器、谷歌浏览器42及以上版本和火狐浏览器52及以上版本兼容处理
Edge浏览器.谷歌浏览器42及以上版本和火狐浏览器52及以上版本做了比较大的升级,内容是禁止了所有的插件. 不光是pageoffice其他的插件也用不了,如果想在这样浏览器上打开pageoffice ...
php 兼容火狐,PHP_CSS兼容IE与火狐浏览器超强兼容代码，如何让你写的代码更兼容火狐 - phpStudy...
CSS兼容IE与火狐浏览器超强兼容代码如何让你写的代码更兼容火狐和IE两大主流浏览器?本文将总结总结CSS中火狐浏览器与IE浏览器的兼容代码,兼容你兼容主要是语法规范问题,你写CSS写规范了,就都兼 ...
php 兼容火狐,HTML_总结CSS中火狐浏览器与IE浏览器的兼容代码，如何让你写的代码更兼容火狐 - phpStudy...
总结CSS中火狐浏览器与IE浏览器的兼容代码如何让你写的代码更兼容火狐和IE两大主流浏览器?本文将总结总结CSS中火狐浏览器与IE浏览器的兼容代码,兼容你兼容主要是语法规范问题,你写CSS写规范了, ...
IE浏览器和火狐浏览器兼容问题——CSS篇
一.css+div 样式 IE与FF兼容问题汇总 CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和火狐浏览器存在很大的解析差异,这里介绍一下兼容要点. 1.DOCTYPE 影响 CSS 处理 ...

火狐浏览器-webkit-line-clamp兼容问题

火狐浏览器-webkit-line-clamp兼容问题相关推荐

最新文章

热门文章