火狐浏览器-webkit-line-clamp兼容问题
问题描述：firefox68及68以上版本支持-webkit-line-clamp属性兼容firefox各个版本方案 ：如果某个元素同时存在fd-line-clamp和other-line-clamp两个类，那么other-line-clamp中一定要增加：display: block !important;/*chrome 浏览器实现 ...*/.fd-line-clamp {overflow:
·
- 问题描述：
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%);
}
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)