文本過長後,顯示省略號。ff特有的hack方法。

看了這篇文章,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樣式設置
     }
   }
相關文章
相關標籤/搜索