内容超出省略实现

1. 单行

.ellipsis {
   250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2. 多行css实现

<div className="group-package-pickup__detail-content">
       <div className="group-package-pickup__detail-content-text">
              Call me Ishmael.Call me Ishmael.  
       </div>
 </div>


.group-package-pickup__detail-content {
    overflow: hidden;
    position: absolute;
    top: 25px;
    bottom: 0;
    min-height: 20px;
    max-height: 40px;
}

.group-package-pickup__detail-content:before {
    content: "";
    float: left;
     5px;
    height: 100%;
}

.group-package-pickup__detail-content-text {
    float: right;
     100%;
    margin-left: -5px;
}        

.group-package-pickup__detail-content:after {
    content: "2026";
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    float: right;
    position: relative;
    top: -20px;
    left: 100%;
     40px;
    margin-left: -40px;
    padding-right: 5px;
    text-align: right;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
}

缺点： 绝对定位，脱离文档流，如果后边有内容不能自适应两者间距

3.多行js 实现

<div className="group-package-pickup__detail" title={ppgName}>{ppgName}</div>


.group-package-pickup-active{
    max-height: 40px;
    overflow: hidden;
}

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


componentDidMount() {
    const detailContent = document.getElementsByClassName('group-package-pickup__detail')[0]
    const detailHeight = detailContent && detailContent.clientHeight ? 
    detailContent.clientHeight : 0
    if (detailContent && detailHeight > 40) {
      detailContent.classList.add('group-package-pickup-active')
    }
  }