溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹表格里使用text-overflow后不能隱藏超出的文本的解決方法，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
在w3cschool中css3中有個文本相關的屬性text-overflow，當把它設為ellipsis時文本溢出內容就能顯示為省略標記，而設為clip時就能把文本溢出的部分裁切掉，當然，前提是設置好兩個屬性，那就是white-space:nowrap（強制文本在一行內顯示）及overflow:hidden（溢出內容為隱藏），也就是要同時有
代碼如下:
{
text-overflow:ellipsis或clip;
white-space:nowrap;
overflow:hidden;
}
因為之前有用過不少次這個屬性，而且用得也都很順利，所以最近在弄一些table的時候遇到了td內的內容太多而出現換行從而影響整體的美觀的問題，所以我想把文本不換行而且讓超出的文本能顯示為省略號，于是我就很自然的就去用了上面那三屬性并且也為td設置了長度和寬度，結果神了奇，一直沒把超出的文本內容給換成省略號，嘗試排除了各種我覺得有可能的影響后依舊不能解決，于是我只好去google一下，后來終于找到了原因，就是要在table的樣式里定義一個屬性 table-layout:fixed，綜上，要想解決表格里面使用text-overflow后依舊不能隱藏超出的文本的問題，就必須完整的使用下面這些屬性
代碼如下:
td{
text-overflow:ellipsis或clip;
white-space:nowrap;
overflow:hidden;
width:**px;
}
table{
table-layout:fixed;
}
還有如果想鼠標移動上去時顯示被隱藏的文本內容，還可以設置
代碼如下:
td:hover
{
text-overflow:inherit;
overflow:visible;
}
關于表格里使用text-overflow后不能隱藏超出的文本的解決方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
