html - 截断每个表格单元格中的长文本，但悬停时在一行中的每个单元格中显示完整文本

Question

CSS 代码:

.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>

这很好用，当您将鼠标悬停在一个单元格上时，它会扩展该单元格中的文本。我想要做的是将鼠标悬停在一行上并展开该行中所有被截断的文本。

也许这可以用 JQuery 来完成？

Answer 1

您不需要 jQuery 甚至 JavaScript，只需将您的 :hover 伪类移动到 tr 中，如下所示:

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

当然，这里有一个片段展示了它的实际效果:

.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>