首先我们来看一看css实现单行文本超出省略号的方法。
css实现单行文本的溢出显示省略号应该用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。
css单行文本超出省略号的实现代码：
<!DOCTYPEhtml>
<html>
<head>
<metacharset=utf-8">
<title>省略号test</title>
<styletype="text/css">
*{
margin:0;
padding:0;
}
body{
padding:10px;
font-family:Arial;
}
#test{
position:relative;
width:150px;
height:20px;
line-height:20px;
text-overflow:ellipsis;
white-space:nowrap;
*white-space:nowrap;
overflow:hidden;
border:1pxsolid#999;
}
#testspan{
position:absolute;
top:0;
right:0;
display:block;
float:left;
}
</style>
</head>
<body>
<divid="test">php中文网php中文网php中文网php中文网php中文网php中文网php中文网</div>
</body>
</html>
css单行文本超出省略号的效果如下：
2345截图20180919100533.png
text-overflow:ellipsis属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢？下面我们就继续说css实现多行文本超出省略号的方法。（text-overflow:ellipsis属性更多内容可参考css手册）
1、css实现多行文本超出省略号之直接用css属性设置(只有-webkit内核才有作用)
语法：
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
移动端浏览器绝大部分是WebKit内核的，所以该方法适用于移动端；
-webkit-line-clamp用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupportedWebKitproperty），它没有出现在CSS规范草案中。
display:-webkit-box将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient设置或检索伸缩盒对象的子元素的排列方式。
text-overflow:ellipsis以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。
2、css实现多行文本超出省略号之利用绝对定位和padding;(跨浏览器解决方案)
语法：
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%);
}
这个方法的原理是：首先在包含文字的元素里，嵌入一个<span>...</span>，然后包含文字的元素右侧留出...的位置(padding-right),最后利用绝对定位将...定位至右侧的padding-right区域。
说明：该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
注意：
将height设置为line-height的整数倍，防止超出的文字露出。
给p::after添加渐变背景可避免文字只显示一半。
由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c57166.shtml
