html - 截断每个表格单元格中的长文本,但在悬停时连续显示每个单元格中的全文
问题描述
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 来完成?
解决方案
您不需要 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>
推荐阅读
- javascript - 访问 Vue 子组件 ref 以进行 DOM 操作
- reactjs - 将芯片/标签移到 MUI 中的自动完成框之外
- r - 以特定顺序绑定
- enterprise-architect - 如何在企业架构的DMN图中使用FEEL语言中的for循环
- python - 语法错误:“返回”外部函数:我的缩进似乎是正确的
- python - 需要定义字典而不对其进行更改
- javascript - 调用 API 后 x 小时后运行代码的好方法是什么?
- c++ - 为什么 LLVM 将无意义的值传递给 FFI 函数?
- python - 如何为 Spyder 安装 Pygame?
- javascript - 使用 react-native-track-player 从 Napster API 流式传输歌曲