css 单行、多行文本溢出显示省略号。

单行文本溢出省略号处理主要是用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 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

css 单行、多行文本溢出显示省略号。

猜你喜欢