1.效果
默認(rèn)

默認(rèn).png

鼠標(biāo)移上去

鼠標(biāo)移上去.png

代碼

<div class="txt-box">
  鼠標(biāo)移上去鼠標(biāo)移上去鼠標(biāo)移上去鼠標(biāo)移上去鼠標(biāo)移
  上去鼠標(biāo)移上去鼠標(biāo)移上去鼠標(biāo)移上去鼠標(biāo)移上去鼠
  標(biāo)移上去鼠標(biāo)移上去鼠標(biāo)移上去鼠標(biāo)移上去鼠標(biāo)移上
</div>

 .txt-box {
    width: 200px;
    height: 78px;/*高度固定*/
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;/*三行省略*/
    -webkit-box-orient: vertical;
    font-size: 14px;
    color: #545c63;
    line-height: 28px;
    transition: all .1s;
  }
  .txt-box:hover {
    background: #fff;
    height: auto;/*設(shè)置一個最小高度，實際高度自動*/
    min-height: 78px;
    position: relative;
    z-index: 5;
    padding: 10px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 8px;
    box-shadow: 0 8px 16px 0 rgba(7,17,27,.2);/*加陰影*/
    -webkit-line-clamp: inherit;/*去掉省略*/
  }