截斷每個表格單元格中的長文本，但在懸停時連續在每個單元格中顯示全文

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>