html5多出來的字自動隱藏並顯示...

 

 

擴展：（新增兩行...的實現）

/* 標題多出部分顯示... */
.one_dot_hide {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 兩行顯示，多出來的顯示... */
.two_dot_hide {
  overflow: hidden;
  text-overflow: ellipsis;
  /* Firefox */
  display: -moz-box;
  -moz-line-clamp: 1;
  -moz-box-orient: vertical;
  /* Safari、Opera、Chrome */
  display: -webkit-box;
  /* 盒子垂直對齊 */
  -webkit-box-orient: vertical;
  /* 兩行 */
  -webkit-line-clamp: 2;
}