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

最新推荐文章于 2024-05-14 18:01:48 发布

bidepanm

最新推荐文章于 2024-05-14 18:01:48 发布

阅读量2.1k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/bidepanm/article/details/118031683

版权

问题描述：
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%);
}

bidepanm

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
火狐浏览器-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: hidden; /** 隐藏超出的内容 **/ word-break: br.
复制链接

扫一扫