css 完成文本太长全自动掩藏作用

日期:2020-10-16 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

单行

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; 

多行(适配各个访问器)//根据遮盖最终几个字的方式

p{
position:relative;
line-height:1.4em;
height:4.2em;/* 3 倍line-height  是多少倍便是是多少行*/
overflow:hidden;
}
.p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
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%);
}

实际效果以下

总结

以上所述是网编给大伙儿详细介绍的css 完成超过要求行数全自动掩藏作用,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!