隱藏/顯示錶格單元格中的內容

我有一張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

隱藏/顯示錶格單元格中的內容

回答

相關問題