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

时间:2017-06-12 15:25:23

标签: javascript html css angularjs

我有一个动态加载数据的表,当单元格中的文本很大时,我想用省略号包装它,鼠标悬停时优雅地显示完整的数据。 目前我只是使用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>

1 个答案:

答案 0 :(得分:0)

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

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

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