CSS控制的內容超過容器寬度後顯示省略符號

css|控制|顯示

一般我們看到的比如新聞列表，為了使文字不回行，控制字數，會通過程式讓多餘的字元顯示省略符號，我們只使用CSS可以達到同樣的效果，雖然不完美。

li {
   width:50px;
   white-space:nowrap;
   text-overflow:ellipsis;
   overflow: hidden;
   }

首先是一個容器，可以是div,li,td等等，先定義寬度，“white-space:nowrap”是強制在一行內顯示所有文本，不回行。“text-overflow:ellipsis”就是關鍵了。

text-overflow是CSS3新增的屬性，IE6以上版本支援。它可以帶2個參數：clip [不顯示省略標記（...），而是簡單的裁切]，ellipsis[當對象內文本溢出時顯示省略標記（...）]。所以，這個方法是不支援Firefox的。因此，我們還要加上一句overflow: hidden，讓多餘文字在ff中隱藏。

雖然打到了效果，但是因為用程式控制這種效果也很方便，而且沒有瀏覽器安全色性的問題，所以用CSS控制的方法就顯得雞肋了。