CSS文本溢出 如何显示省略号？

在排网页的过程中，我们经常可以看到超出的文本会以省略号显示，那么怎么用CSS实现呢？
省略号分两种,单行文本溢出省略号和多行文本溢出省略号。
1.单行文本溢出省略号

   <style>
  .a{
   width: 200px;
  height: 30px;
 line-height: 30px;
 background: pink;
 overflow: hidden;
 text-overflow:ellipsis;
white-space: nowrap;
}
 </style>
 <div class='a'>
我如果爱你绝不像攀岩的凌霄花借你的高枝炫耀自己
</div>

2.多行文本溢出省略号

<style>

.b{
   width: 300px;
  height: 61px;
   background: pink;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:3;
  overflow: hidden;
   text-overflow: ellipsis;
   }
   </style>
 <div class="b">
我如果爱你绝不像攀岩的凌霄花借你的高枝炫耀自己我如果爱你绝不学痴情的鸟儿为绿荫重复单调的歌曲也不止像泉源长年送来
  </div>

sha.png

知识有限，仅供参考，如有问题，麻烦指出。