解決html表格中內容超出不強制換行和超出寬度自動隱藏並顯示省略號

在表格佈局中經常會遇到因爲表格內容長短的變化導致佈局混亂的情況,這個時候我們可能會有爲了佈局穩定把單元格寬度寫死的情況;但是我們設置了寬度卻發現超出了寬度之後會自動變大,用css定義元素的overflow:hidden;屬性也不行;最後找的的解決方案如下:

table{
   
    table-layout:fixed;/* 只有定義了表格的佈局算法爲fixed,下面td的定義才能起作用。 */
}
td{
    width:100%;
    word-break:keep-all;/* 不換行 */
    white-space:nowrap;/* 不換行 */
    overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */
    text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ;需與overflow:hidden;一起使用。*/
}

如果擔心隱藏了看不到完整的單元格內容建議在單元格上面加上title屬性值就是單元格的完整內容這樣只要鼠標經過就能顯示全部了


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章