使用css或js实现多行文本超出使用...代替

最新推荐文章于 2021-11-06 14:26:43 发布

qq_43157849

最新推荐文章于 2021-11-06 14:26:43 发布

阅读量576

点赞数

分类专栏：网页文章标签： css html jquery

本文链接：https://blog.csdn.net/qq_43157849/article/details/90715160

版权

网页专栏收录该内容

2 篇文章 0 订阅

订阅专栏

页面效果
这里实现的是两行文本超出使用…替换
在这里插入图片描述
第一种方式：采用css实现

附上完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用css实现多行文本超出使用...代替</title>
    <style>
        .a{
            overflow: hidden;/*用于隐藏超出的文本和...*/
            max-height: 50px;/*用来设置具体显示几行，设置的值最好可以被50整除，否则效果可能不对*/
            line-height: 25px;
        }
        .a:before{
            content: "";
            float: left;
            width: 5px;
            height: 50px;/*这个高度最好和.a中的max-height高度保持一致，设置的值最好可以被50整除，否则效果可能不对*/
        }
        .a > *:first-child{
            float:right;
            width:100%;
            margin-left:-5px;
        }
        .b{
            content:"\02026";
            box-sizing:content-box;
            -webkit-box-sizing: content-box;
            -moz-box-sizing:content-box;
            float:right;
            position:relative;
            top:-21px;/*用来调整...的位置*/
            left:100%;
            width:8em;
            margin-left:-8em;
            padding-right:5px;
            text-align:right;
        }
    </style>
</head>
<body>
    <div class="a">
        <div>
        	<!--在这里最好不要使用带margin或padding的标签，比如p标签、h1~h6标签等。-->
        	<!--在span标签中不要使用margin或者padding，要想设置字体大小请设置在div中-->
            <span>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</span>
        </div>
        <div class="b">
        	<!--在span标签中写入该样式是为了将...下的文本遮挡住-->
        	<span style="background-color:#fff;display:inline-block;">...</span>
        </div>
    </div>
</body>
</html>

第二种方式：采用js实现
附上完整代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>使用js实现多行文本超出使用...代替</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <style>
        p {
            position: relative;
            margin:20px auto;
            width: 20%;
            font-size: 13px;
            color: #868789;
            line-height: 17px;
            text-align: left;
            overflow: hidden;

        }
        .p-after:after{
            content: "...";
            position: absolute;
            bottom: 0;
            right: 0;
            padding-left: 40px;
            background: -webkit-linear-gradient(left, transparent, #fff 55%);
            background: -moz-linear-gradient(left, transparent, #fff 55%);
            background: -o-linear-gradient(left, transparent, #fff 55%);
            background: linear-gradient(to right, transparent, #fff 55%);
        }
    </style>
</head>
<body>
<p class="test">层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言</p>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(function(){
        $('p').each(function(i, obj){
            let lineHeight = parseInt($(this).css("line-height"));
            let height = parseInt($(this).height());
            console.log(height,lineHeight);
            if((height / lineHeight) > 2 ){
                $(this).addClass("p-after")
                $(this).css("height","32px");
            }else{
                $(this).removeClass("p-after");
            }
        });
        $(window).resize(function() {
            //获取文本的行高，并获取文本的高度，假设我们规定的行数是二行，那么对超过行数的部分进行限制高度，并加上省略号
            $('p').each(function(i, obj){
                $(this).removeClass("p-after");
                $(this).removeAttr("style");
                let lineHeight = parseInt($(this).css("line-height"));
                let height = parseInt($(this).height());
                if((height / lineHeight) > 2 ){
                    $(this).addClass("p-after")
                    $(this).css("height","32px");
                }else{
                    $(this).removeClass("p-after");
                }
            });
        });
    })
</script>
</body>
</html>

备注：第二种采用js的方式参考https://blog.csdn.net/janessssss/article/details/80450819，将原来固定的长度改成了动态长度。

qq_43157849

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用css或js实现多行文本超出使用...代替

使用css实现多行文本超出使用...代替页面效果这里实现的是两行文本超出使用…替换实现方式附上完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style&g...
复制链接

扫一扫

专栏目录