看了這篇文章,http://www.w3cplus.com/content/css3-text-overflowcss
記一下要點:python
.text-overflow-ellipsis { -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
text-overflow必須配合下面兩個css才能正確。
但火狐不支持,但經測試,最新版本是支持的。不過下面的hack方法,在火狐下也是支持的。這樣就能夠對火狐特殊的樣式進行設置。css3
/*Firefox實現效果*/ @-moz-document url-prefix(){ .text-overflow span { max-width: 70px;/* 在FF下改變內容寬度,用來放置:after增長的內容(...)*/ float: left;/*進行浮動*/ } } @-moz-document url-prefix(){ /*利用:after增長(...)省略符*/ .text-overflow:after { content:"...";/*增長省略符號*/ float: left;/*設置浮動*/ width: 25px;/*省略符寬度*/ padding-left: 5px;/*省略符內距,用來拉開內容之間的距離*/ color: #000; } }
@-moz-document url-perfix(){}是firefox的一個獨有屬性,只有firefox瀏覽器能識別,也能夠說是一種hack*/
@-moz-document url-prefix(){ css選擇器 { css樣式設置 } }