CSS文本溢出省略号悬停并在弹出框中显示文本

Question

我听说有一个属性可以在弹出框（类似于 excel 的 cmets 框？？）中显示 text-overflow:ellipsis 元素的内容。有谁知道如何实现这一点 - 我只希望它影响表格中已被“省略”的单元格的内容，而不是影响您悬停的所有元素。我的代码是：

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 来创建该弹出框。

如果你想使用 title，你可以这样做：

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>