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

标签 javascript html twitter-bootstrap tooltip

我有一个 HTML 表格,其中一些单元格包含大量内容(例如 1KB)。大多数单元的长度都比这个小得多,大约 15 个字节。

我想隐藏工具提示中的大内容。最好的方法是什么?例如。用“...”显示前 15 个字节左右,然后让用户悬停或单击以查看其余部分(或者,如果不容易的话,甚至不显示前 15 个字节)

如果这有什么区别的话,我们正在使用 Bootstrap。

最佳答案

最简单的实现是... ( Working example here )

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

当然,为了使代码更简洁,您应该考虑分解方法(或者更好,添加 event handlers using jQuery )

关于javascript - 在工具提示中隐藏长表格单元格内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17286999/

相关文章:

javascript - Chrome 扩展 : get current site name

javascript - 为什么我们在缩小的 JavaScript 中有换行符?

javascript - Webmethod 不适用于 jquery

javascript - 在两个元素之间随机显示/隐藏

html - 图像显示在 IE11 的对话框外

html - IE 8 背景覆盖拉伸(stretch) Bootstrap

html - 使用 css 将图像替换为 youtube 视频

php - 如何使用 Codeigniter 在单个文件上传中上传多个图像?

jquery - Bootstrap 导航栏覆盖缩放内容

javascript - 当任何 block 级元素的视口(viewport)较窄时添加水平滚动条