內容超出省略實現

1. 單行

.ellipsis {
  width: 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;
    width: 5px;
    height: 100%;
}

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

.group-package-pickup__detail-content:after {
    content: "\02026";
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    float: right;
    position: relative;
    top: -20px;
    left: 100%;
    width: 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')
    }
  }