Question

我有一个动态加载数据的表，当单元格中的文本很大时，我想用省略号包装它，鼠标悬停时优雅地显示完整的数据。目前我只是使用HTML和CSS来做这个，我的问题是使用下面的CSS，即使数据不大（宽度也没有省略号），鼠标悬停时仍然会出现样式。这有解决方法吗？或者有更好的方法来使用JavaScript吗？

这是我创造的掠夺者。在第三列中，您可以看到文本不大，没有省略号，但仍然会应用样式。非常感谢任何帮助！

https://plnkr.co/edit/cDOxlXRK6QfynVdpCbCT?p=preview

我的CSS如下：

/* Styles go here */
table td.text {
  max-width: 10px;

}

table td.text span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}
table td.text:hover span{
    border: 2px solid #000000;
    background-color: #ffffff;
    padding: 5px;
    overflow: visible;
    white-space: normal;
    height: auto;
    /* just added this line */
    position:absolute;
}

table td.text:hover span:empty {
    display:none;
}

我的HTML如下：

    <table>
  <thead>
    <tr class="text-center">
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
    </tr>
  </thead>
  <tr>
    <td class="text"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></td>
    <td class="text"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></td>
    <td class="text"><span>Lorem </span></td>
    <td class="text"><span></span></td>
  </tr>

</table>

Answer 1

造型仍然会发生是有道理的。你还没有真正做任何事情让它以表中数据的长度为条件。你告诉它隐藏每个表格元素的溢出，只在鼠标悬停时使其可见，它就是这样。

如果我是你，我会制作一个javascript方法来确定你的元素在应用CSS类之前是否有溢出数据（显然这需要一个默认的CSS类，然后如果改为溢出类，满足条件。这可以通过jQuery轻松完成。

这个问题可能有所帮助：javascript css check if overflow

如何以用户友好的方式在表中显示溢出文本？

1 个答案: