最近寫的頁面中,想讓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; }