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>