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>

截断每个表格单元格中的长文本，但在悬停时连续显示每行单元格中的全文

1 个答案: