Question

我有一个HTML表格，其中一个单元格中有很多文字。是否有一种隐藏内容的简单方法，当我将这个确切的单元格悬停时，整个内容会显示出来？就像只显示前10-20个字符或其他东西一样。然后当我悬停那个单元格时，整个内容都会出现。

我可以用CSS简单地完成这项工作，还是需要JavaScript等？

Answer 1

您可以在悬停时控制CSS和JavaScript中单元格的高度。

在CSS中，这看起来像：

.cell{
    height: 40px;
    transition: height 1s ease-in;
    overflow: hidden;
}
.cell:hover{
    height: 100px;
}

当然，我在这里任意选择数字，所以你需要根据自己的需要选择数字。

Answer 2

您可以使用onmouseover和onmouseout使用javascript完成此操作。

即：

<td onmouseover="document.getElementById('textbox').innerHTML='Text to Show'" onmouseout="document.getElementById('textbox').innerHTML='Truncated Text'">
<div id=textbox>Truncated Text</div>
</td>

Answer 3

如果在您的情况下可以选择，您可以选择一个分隔位置：

<div>Some text that shows all the time
  <span class="more"> (more)</span>
  <span class="expanding"> and some more text that shows when you hover</span>
</div>

然后在css中，当你将鼠标悬停在div上时，分别隐藏和显示“更多”类和“扩展”类。

.more      { display: block; }
.expanding { display: none; }
div:hover > .expanding { display: block; }
div:hover > .more      { display: none; }

这样做是显示和隐藏div的子元素。如果你把div放在td中，它应该填满它，悬停将看起来像你正在盘旋的td。或者你可以使用td来保存这三个。

唯一棘手的部分是它一直看起来并不好看，除非你的段落在“（更多）”之上。那是因为你不能预测段落中间的行结尾，因为持有文本的矩形会改变宽度。

FIDDLE

Answer 4

您可以使用css text-overflow 属性隐藏带省略号的单元格内容

像这样：

table tr td
{
    text-overflow: ellipsis; 
    height: 40px;
}

table tr td:hover
{
    text-overflow: none; 
    height: auto;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Answer 5

这是一个例子，

我有一个很长的文字，当我将鼠标悬停在它上面时，我会提取它。

所以，我们开始

＆LT; - 开始 - ＆GT;

'＆gt; p
的onLoad =函数（）
{
var text = this.innerHTML;
var hide = this.innerHTML.substr（0,7）+“......”;
this.innerHTML =隐藏;
}
的onMouseOver =函数（）
{
this.innerHTML =文字;
}
的onmouseout =函数（）
{
this.innerHTML =隐藏;
}
＆LT;这是一个长文本＆gt; p＆lt;

＆LT; - 结束 - ＆GT;

另外，我如何添加像你这样的程序部分？

隐藏/显示表格单元格中的内容

5 个答案: