CSS 控制单行或者多行文本超出显示省略号text-overflow 应用说明:CSS text-overflow 设置

设置一行文字显示文本数量，超出部分用…表示知识点：css3 text-overflow 属性

text-overflow: clip | ellipsis;
- clip : 不显示省略标记（...），而是简单的裁切
- ellipsis : 当对象内文本溢出时显示省略标记（...）
text-overflow 应用说明:CSS text-overflow 设置或检索是否使用一个省略号标记（...）标示对象内文本文字的溢出。
```
<div id="div1">
  今天学习任务是总结
  1、快排代码及思想，2、css实现三角形圆形，3、js和css实现限制显示字数，文字长度超出部分用省略号表示
  只显示一行。4、还有js基础视频学习。5、三次握手
</div>
```
```
#div1 {
  overflow: hidden;
  text-overflow: ellipsis; //超出部分以省略号显示
  white-space: nowrap;
}
```

多行文字只显示前几行,知识点：

-webkit-line-clamp:2

-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。为了实现该效果，它需要组合其他外来的 WebKit 属性。常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient; 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
text-overflow，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

#div1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 可以显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;
}

<div id="div1">
  今天学习任务是总结
  1、快排代码及思想，2、css实现三角形圆形，3、js和css实现限制显示字数，文字长度超出部分用省略号表示
  只显示一行。4、还有js基础视频学习。5、三次握手的具体实现。
  1、快排代码及思想，2、css实现三角形圆形，3、js和css实现限制显示字数，文字长度超出部分用省略号表示
  只显示一行。4、还有js基础视频学习。5、三次握手的具体实现。
  1、快排代码及思想，2、css实现三角形圆形，3、js和css实现限制显示字数，文字长度超出部分用省略号表示
  只显示一行。4、还有js基础视频学习。5、三次握手的具体实现。
</div>