1、单行溢出：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

2.多行溢出:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

该种方法只适用于webkit内核浏览器，其他浏览器暂不支持。

3.多行溢出更适用的方法：

 .content {
    width: 690px;
    max-height: 10rem;
    position: relative;
    line-height: 1.4em;
    overflow: hidden;
  }

  .content::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
  }

content为包裹文字的标签，这样会比较好的达到效果。