在工具提示中隐藏长表单元格内容

Hiding long table-cell content in a tooltip

本文关键字：单元格 表单 工具提示 隐藏      更新时间：2023-09-26

我有一个HTML表，其中有一些单元格包含大量内容（例如1KB）。大多数单元格的字节数都比这个小得多，大约为15个字节

我想在工具提示中隐藏大型内容。最好的方法是什么？例如，用"…"显示前15个字节左右，然后让用户悬停或单击以查看其余部分（或者，如果不容易，甚至不显示前15字节）

如果有什么不同的话，我们会使用Bootstrap。

最简单的实现是。。。（此处为工作示例）

<div
    onmouseover="document.getElementById('Overflow1').style.display='inline'"
    onmouseout="document.getElementById('Overflow1').style.display='none'">
    Lorem ipsum dolor sit amet,     
    <span id="Overflow1" style="display: none">
        consectetur adipiscing elit. Fusce a erat non nunc facilisis pulvinar. Ut dignissim ut nisi eu porttitor. Nulla cursus, dolor fringilla ullamcorper dictum, arcu orci faucibus sem, ullamcorper mattis odio sapien quis tortor. Proin dictum vel neque non malesuada. Pellentesque at consectetur augue. Curabitur ipsum est, posuere commodo feugiat quis, suscipit at neque.
    </span>
</div>

当然，对于更干净的代码，您应该考虑分解方法（或者更好的是，使用jQuery添加事件处理程序）

相关文章：