HTML CSS前端开发_实现单行、多行文本溢出显示省略号

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。
实现方法:
css 代码

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

但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出显示省略号,如下。

实现方法:
css 代码

{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
}

适用范围:
因使用了WebKit的css扩展属性,该方法适用于WebKit浏览器及移动端;
注:


实现方法:
css 代码

p {
position:relative;
line-height:20px;
max-height:40px;
overflow:hidden;
}
p::after {
content:’…’;
position:absolute;
bottom:0;
right:0;
padding-left:40px;
background:-webkit-linear-gradient(left,transparent,#fff55%);
background:-o-linear-gradient(right,transparent,#fff55%);
background:-moz-linear-gradient(right,transparent,#fff55%);
background:linear-gradient(toright,transparent,#fff55%);
}

适用范围:
该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

html5做前端开发|安卓手机app前端开发软件|h5开发和web前端的区别

» 本文来自:前端开发者 » 《HTML CSS前端开发_实现单行、多行文本溢出显示省略号》
» 本文链接地址:https://www.rokub.com/4357.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!