1

I have a table that loads data dynamically, when the text in the cell is large I want to wrap it with ellipsis and on mouse hover display the complete data elegantly. Currently I am just doing this using HTML and CSS, my issue is that using the below CSS, even when the data is not large (in width and no ellipsis) the styling on mouse hover still appears. Is there a workaround for this? Or is there a better way to do this using JavaScript?

Here is the plunker I have created. In column three you can see that the text is not large, there is no ellipsis but styling is still getting applied. Any help is much appreciated!

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

My CSS is below:

/* 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;
}

My HTML is below:

    <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>
Steven.lin
  • 103
  • 1
  • 1
  • 11

1 Answers1

0

It makes sense that the styling would still be happening. You haven't really done anything to make it conditional on the length of the data in the table. You're telling it to hide the overflow of each table element and only make it visible on mouseover, and it does exactly that.

If I were you, I would make a javascript method to determine whether or not your element even has overflowing data before applying the CSS classes to it (obviously this would require a default CSS class that then gets changed to an overflow class if a condition is met. This can be done pretty easily with jQuery).

This question may help: javascript css check if overflow

R. McManaman
  • 304
  • 2
  • 14