当前位置：文江博客话题详情

如何在火狐浏览器中让多行文字只显示两行且多余的文字用省略号代替

发布于 2022-09-04 23:12:44 字数 988 浏览 32 评论 0

如何在火狐浏览器中让多行文字只显示两行且多余的文字用省略号代替,
下面的代码在谷歌浏览器是正常的，在火狐里就没有省略号了
图片描述

html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>省略字符</title>
<style type="text/css">
    div{
        width: 100px;
        height: 40px;
        border:solid 1px black;
        /*多行文本省略*/
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

        display: -moz-box;
        -moz-line-clamp: 2;
        -moz-box-orient: vertical;

    }
    
</style>
</head>
<body>
<div>
    测试是否可以省略字符测试是否可以省略字符
</div>
</body>
</html>

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

离去的眼神 2022-09-11 23:12:44

line-clamp 只支持webkit内核的浏览器，所以Firefox下这个功能失效。可以使用hack技术弥补下。
div{
    width: 100px;
    height: 40px;
    line-height: 20px;
    border:solid 1px black;
    position: relative;        
    /*多行文本省略*/
    overflow : hidden;
    text-overflow: ellipsis;

    display: -moz-box;
    -moz-line-clamp: 2!important;
    -moz-box-orient: vertical;
    
    /*! autoprefixer: off */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
// 后面自动补上点
div:after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    bottom: 0;
    content: "...";
    padding: 0 5px 1px 30px;
    position: absolute;
    right: 0;
}

~没有更多了~

关于作者

暂无简介

文章

评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

凡间太子

文章 0 评论 0

这个俗人

文章 0 评论 0

梦断已成空

文章 0 评论 0

emmm

文章 0 评论 0

心头的小情儿

文章 0 评论 0

mb_XdVNmmuJ

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文