单行文本溢出省略号处理主要是用text-overflow: ellipsis; 注意的是，一般需要添加宽度来限定。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.ellipsis{
width:200px; /*设置显示的宽度*/
overflow: hidden; /*/*属性规定当内容溢出元素框时发生的事情。*/*/
text-overflow:ellipsis; /*设置多余的省略号处理*/
white-space: nowrap; /*设置不换行*/
border:1px solid black;
}
</style>
</head>
<body>
<div class="ellipsis">爱就像蓝天白云，晴空万里，突然暴风雨。无处躲避，总是让人，无处躲避</div>
</body>
</html>
但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。
接下来重点说一说多行文本溢出显示省略号，如下
实现方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.ellipsis{
width: 50%; /*设置显示宽度*/
margin: auto; /*居中显示*/
overflow: hidden; /*属性规定当内容溢出元素框时发生的事情。*/
text-overflow: ellipsis; /*末尾省略号处理*/
display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示。*/
-webkit-line-clamp: 2; /*显示多少行*/
-webkit-box-orient: vertical; /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式。*/
border:1px solid black;
}
</style>
</head>
<body>
<div class="ellipsis">爱就像蓝天白云，晴空万里，突然暴风雨。无处躲避，总是让人，无处躲避爱就像蓝天白云，晴空万里，突然暴风雨。无处躲避，总是让人，无处躲避爱就像蓝天白云，晴空万里，突然暴风雨。无处躲避，总是让人，无处躲避爱就像蓝天白云，晴空万里，突然暴风雨。无处躲避，总是让人，无处躲避爱就像蓝天白云，晴空万里，突然暴风雨。无处躲避，总是让人，无处躲避爱就像蓝天白云，晴空万里，突然暴风雨。无处躲避，总是让人，无处躲避
</div>
</body>
</html>效果如图：
适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
注：
- -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
- display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
