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前端的区别