li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
目前位置: Home > DreamWeaver > [CSS小技巧]內容超過長度後以省略號顯示的方法
訂閱:
張貼留言 (Atom)
提供一些平面設計與網頁設計作品及學習上經驗分享,FLASH開發、DreamWeaver 、CSS、PhotoShop、Illustrator、InDesign教學及其他設計軟體使用心得及技巧分享!!
目前位置: Home > DreamWeaver > [CSS小技巧]內容超過長度後以省略號顯示的方法
4 Comments:
請問老師
可不可以用字數限制
例如超過50個字便隱藏
感謝!
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;
}
正努力解決中
謝謝!
Hi ironman
這二天在趕案子沒時間上來,你的問題有二個,一個是 white-space:nowrap; 這個東西大部份都是用在不使沒有空白鍵的字,例如:中文字,使它不分開,但是都要配合 <span> 這類有區塊屬性一起使用,再來是 text-overflow:ellipsis; 這個東西其實只有單行才能使用,所以你把上面那行拿掉就會換行了,但是效果還是只會出現在第一排而已,如果你一定要換行,又要有省略符號,那我想使用 JavaScript 是比較好的選擇哦!
張貼留言