CODEWITHSUNDEEP
htmlcss
bech64
bech64

Reputation: 129

Truncate long text in each table cell, but show full text in each cell in a row on hover

CSS code: 

.test {
    width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.test:hover {
    overflow: visible;
    white-space: normal;
    height: auto;
}

HTML:

<table>
    <tr>
        <td>
            <p class="test">This is text that doesn't fit inside, but is visible on hover.</p>
        </td>
        <td>
            <p class="test">This is text that doesn't fit inside, but is visible on hover.</p>
        </td>
        <td>
            <p class="test">This is text that doesn't fit inside, but is visible on hover.</p>
        </td>
    </tr>
    <tr>
        <td>
            <p class="test">This is text that doesn't fit inside, but is visible on hover.</p>
        </td>
        <td>
            <p class="test">This is text that doesn't fit inside, but is visible on hover.</p>
        </td>
        <td>
            <p class="test">This is text that doesn't fit inside, but is visible on hover.</p>
        </td>
    </tr>
</table>

This works fine, when you hover over a cell, it expands the text in that cell. What I would like to do is hover over a row and expand all the truncated text in that row.

Maybe this could be done with JQuery?

Upvotes: 2

Views: 1717

Answers (1)

Xhynk
Xhynk

Reputation: 13880

You don't need jQuery or even JavaScript, just move your :hover pseudo class to the tr like so:

tr:hover .test {
    /* These styles will be applied to all 'test's inside a 'tr' that's hovered. */
}

And of course here's a snippet showing it in action:

.test {
  width: 100px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

tr:hover .test {
  overflow: visible; 
  white-space: normal;
}
<table>
  <tr>
    <td><p class="test">This is text that doesn't fit inside, but is visible on hover.</p></td>
    <td><p class="test">This is text that doesn't fit inside, but is visible on hover.</p></td>
    <td><p class="test">This is text that doesn't fit inside, but is visible on hover.</p></td>
  </tr>
  <tr>
    <td><p class="test">This is text that doesn't fit inside, but is visible on hover.</p></td>
    <td><p class="test">This is text that doesn't fit inside, but is visible on hover.</p></td>
    <td><p class="test">This is text that doesn't fit inside, but is visible on hover.</p></td>
  </tr>
</table>

Upvotes: 2

Related Questions