CSS文本溢出省略號懸停並在彈出框中顯示文本

Question

我聽說有一個屬性在彈出框中顯示text-overflow:ellipsis元素的內容（類似於Excel的註釋框??）。有誰知道如何實現這一點 - 我只希望它能夠影響表格中已經「橢圓」的單元格的內容，而不是您懸停的所有元素。我的代碼是：

td, th { 
    padding: 6px; 
    text-align: left; 
    vertical-align: middle; 
    // word-wrap: break-word; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    img { 
    width: 20px; 
    height: 20px; 
    display: block; 
    } 

} 
td:hover { 
    overflow: visible; 
    // white-space: normal; 
    // word-wrap: break-word; 
} 

非常感謝

Answer 1

除非你想使用彈出從Title attribute據我所知，像你將需要JS創建彈出框中沒有屬性。

如果你想使用冠軍你可以做這樣的事情：

table { 
 
    width: 300px; 
 
    table-layout: fixed; 
 
} 
 
table td { 
 
    border: 1px solid red; 
 
    padding: 5px; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 
td:before { 
 
    content: attr(title); 
 
}

<table> 
 
    <tr> 
 
    <td title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum nemo dolores tempora maiores expedita! Quod consectetur accusamus, enim asperiores quo, fugiat reiciendis quidem atque beatae magnam laborum molestiae quam voluptas!"></td> 
 
    <td title="Quod consectetur accusamus, enim asperiores quo, fugiat reiciendis quidem atque beatae magnam laborum molestiae quam voluptas!"></td> 
 
    </tr> 
 
</table>