[CSS小技巧]內容超過長度後以省略號顯示的方法

如果你想要固定字數,多的字就出現省略符號(大多是….用點來代表),這個方法適用與IE6.0及舊版與Opera瀏覽器,IE7.0 及 FireFox 都不支援,但是會因為最後一行的 overflow: hidden; 只要超過我們設定的寬度,多的字會被隱藏起來,只是沒有點點點的符號而以,所以還是可以正常執行哦!

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

4 Comments:

匿名 提到...

請問老師
可不可以用字數限制
例如超過50個字便隱藏
感謝!

蕃茄 (Tomato) 提到...

ironman 你好啊~
當然可以使用字數來限制,只要將 width:200px; 這行裡的單位從 px 改成 em 就可以囉!
例如:width:15em; 就可以限制最多出現15個字,但是 IE 跟 FireFox 的顯示方法不一樣哦~
IE:會顯示出14個字,第15個字會出現 ... 的省略符號。
FireFox:則是會顯示出15個字,而不會有省略符號。

如果還有其他的問題,也歡迎你再回來討論!

匿名 提到...

報告老師
改為em後
發現文字無法斷行
會擠開版面
如下CSS
我加了兩種斷行方式都不行

.OverHideWord { /*超過字數隱藏*/
width:50em ;
display:block; /* 將資料內容分段顯示 */
word-break:break-all; /* 強制文字斷行 */
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}

正努力解決中
謝謝!

蕃茄 (Tomato) 提到...

Hi ironman
這二天在趕案子沒時間上來,你的問題有二個,一個是 white-space:nowrap; 這個東西大部份都是用在不使沒有空白鍵的字,例如:中文字,使它不分開,但是都要配合 <span> 這類有區塊屬性一起使用,再來是 text-overflow:ellipsis; 這個東西其實只有單行才能使用,所以你把上面那行拿掉就會換行了,但是效果還是只會出現在第一排而已,如果你一定要換行,又要有省略符號,那我想使用 JavaScript 是比較好的選擇哦!

 
© 2008 Blogger Template Layout Design by [ Fanchie AirHead ]