5. 【原創】table設置text-overflow: ellipsis;（超出範圍顯示...）不生效

最近寫的頁面中，想讓table中的td內容超出文本以後顯示'...',可是使用text-overflow: elipsis;沒有生效，後來通過試驗才摸索出正確的設置方式。

table {
    table-layout: fixed;//表格佈局：固定
    width: 200px;  //一點呀設置表格的寬度
}

td {
    white-space: nowrap;//超出文本不換行
    overflow: hidden;//超出文本隱藏
    text-overflow: ellipsis;  //超出文本顯示...
}

 還可使用hover屬性設置鼠標懸停的時候顯示其內容。

td:hover { 
    text-overflow:inherit; 
    overflow:visible; 
}