/* 單行超出顯示省略號 */
#div {
      width: 200px;
      overflow: hidden;  /* 隱藏超出的文本 */
      text-overflow: ellipsis;  /* 用省略號替代被修剪的文本 */
      white-space: nowrap;  /* 控制文本不換行 */
}

效果圖

/* webkit內(nèi)核專用（移動(dòng)端） --- 多行顯示省略號*/
#div2 {
      width: 200px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;/* 要幾行后顯示省略號 */
      overflow: hidden;
}

效果圖