CSS Text-Overflow Ellipsis悬停，并在弹出框中显示文本

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

，除非您想从标题属性中使用弹出窗口，否则我知道没有这样的属性，您将需要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>