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

我有一张HTML表格，其中一个单元格中有很多文字。有没有简单的方法来隐藏内容，当我把这个确切的单元格全部内容展示出来？就像只显示前10-20个字符或什么的。然后，当我将鼠标悬停时，整个内容都显示出来。隐藏/显示表格单元格中的内容

我可以用简单的方法用CSS来做到这一点，还是我需要JavaScript等？

2013-08-27 Treps

你可以显示悬停的内容，勾选[here]（http://stackoverflow.com/questions/5210033/show-div-on-hover-with-only-css） – alexanderkustov

Thx！但是，如果我仍想显示内容，如果我将鼠标放在表格单元格中。您链接的指南仅显示悬停链接时如何显示内容。这如何与一个表一起工作？我想展开单元格并显示整个内容，直到将鼠标移动到表格单元格之外。你知道如何做到这一点？ – Treps

您可以使用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>

来源

2013-08-27 20:42:41 DrewP84

Thx！标记为解决方案，因为它适用于所有浏览器，甚至IE8。（Y） – Treps

很高兴提供帮助。您可以使用substr自动截断到适合您的单元格的特定长度。 – DrewP84

你可以选择一个分割的地方，如果在您的情况是可能的：

<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来保存所有三个。

这个唯一棘手的部分是，除非你有一个以“（more）”结尾的段落，否则它总是不好看。这是因为您无法预测段落中间的行尾，因为包含文本的矩形会更改宽度。

FIDDLE

来源

2013-08-27 20:38:16

可以控制细胞的高度在CSS和JavaScript的悬停。

在CSS，这看起来像：

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

当然，我在这里随意挑选号码，所以你需要，以适应那些您的需求。

来源

2013-08-27 20:41:48 misdreavus79

您可以使用CSS 文本溢出属性为隐藏与省略号

单元格的内容就像这样：

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

来源

2013-08-27 20:48:06 Ren4n

葡萄牙语链接。 –

现在用英语，对不起！ – Ren4n

这里是一个例子，

我有一个长文本，并在我的鼠标悬停时提取它。

所以，我们开始

< - 启动 - >

“>点
的onLoad =函数（）
{
变种文本= this.innerHTML;
var hide = this.innerHTML.substr（0,7）+“...”;
这个。innerHTML = hide;
}
的onMouseOver =函数（）
{
this.innerHTML =文本;
}
的onmouseout =函数（）
{
this.innerHTML =隐藏;
}
<这里是一个长的文本>点<

< --End - >

另外，我怎么可以添加像你这样一个计划的一部分？

来源

2013-08-27 21:04:11 572

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

回答

相关问题