多行溢出显示省略号就是下面这两行,网友可以发现这里关键的就是background里面使用的渐变(渐变是我想的办法,老网友用的是图片),底下的字被遮住了,再把...放上去,一切既方便又好兼容
Talk is cheap,let me show you the code.[乖巧]
.contactus-title-txt{
font-size: 12px;
letter-spacing: 4px;
position:relative;
line-height:22px;
/* 3 times the line-height to show 3 lines */
height: 88px ;
overflow:hidden;
}
.contactus-title-txt::after{
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding: 0 8px 1px 26px;
background: linear-gradient(to right, rgba(0,0,0,0) 10%, rgba(0,0,0,1) 40%);
}
网友评论