IE8/9 使用text-overflow: ellipsis 做塊元素超長內容變省略號的問題

首先平時用的時候要配合

復制代碼代碼如下:
overflow: hidden;
white-space: nowrap;

這兩個屬性讓起溢出隱藏和不換行,然后IE8用的時候記得不要加

復制代碼代碼如下:
word-berak:break-all;
word-wrap:break-word;

這樣斷開了,在IE8里面是不會變成省略號的(但是在IE6/7/FF/Chrome都沒有問題),其實都單行省略了,本來也沒有必要斷詞~-_-!

所以一般標準組合就是:

復制代碼代碼如下:
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis; /* for Opera */
text-overflow: ellipsis; /* for IE */

基本通殺所有瀏覽器了~

哦,對了,忘了說,像a這類默認非塊的元素,要加上display:block;才有效果哦`,..嗯嗯,別忘了width或者max-width.

相關經驗推薦