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>

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

1 个答案: