文本内容超出父元素一行或多行省略号代替

单行文本溢出省略号
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

 

多行文本溢出:

第一种:

.news_list li .news_text p{

    line-height: 25px;
    max-height: 50px;/*  行高与显示行数的乘积  */

/*火狐不出现省略号,而是隐藏*/

word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;/** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical;/** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 2;/** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/

}



多行文本溢出省略号

.news_list li .news_text p{

/*要想兼容火狐,IE,除了一下兼容代码外,要设置行高和最大高*/

position: relative;
    line-height: 25px;
    max-height: 50px;

/*不兼容火狐,IE*/

word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;/** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical;/** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 2;/** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/

}

/*兼容火狐,ie9及以上*/
.news_list li .news_text p::after {
    /*content: "...";*/
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}


/*兼容ie8*/
.news_list li .news_text p:after {
    /*content: "...";*/
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

转载于:https://www.cnblogs.com/zyl-930826/p/8649386.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值