單行文字

先來簡單說一下單行文字超出顯示省略號的方法,大家基本都會了:

Element {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

含義什麼的在此就不額外贅述了

多行文字

Element {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}	

但是這種方法有一個缺點, 它只能相容谷歌核心的瀏覽器, 對於 **火狐/ie/歐朋** 等瀏覽器就行不通了

所以需要另一種方法來處理多瀏覽器的相容問題

Element {
  position: relative;
  line-height: 24px;
  height: 72px;
  overflow:hidden;
}
	
Element:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
}

1. 將height設定為line-height的整數倍,防止超出的文字露出
2. 如果需要用ie7及以下版本的瀏覽器需要更換 after 偽類,因為ie7及以下版本的瀏覽器不顯示 content
   中的內容