如何以用戶友好的方式在表格中顯示溢出文本？

我有一個動態加載數據的表格，當單元格中的文本很大時，我想用省略號將它包裹起來，並且在鼠標懸停時優雅地顯示完整的數據。目前我只是使用HTML和CSS來做這件事，我的問題是使用下面的CSS，即使數據不是很大（寬度和省略號），鼠標懸停時的樣式仍然會出現。有沒有解決方法？或者有沒有更好的方法來使用JavaScript來做到這一點？如何以用戶友好的方式在表格中顯示溢出文本？

這是我創建的重擊者。在第三欄中，您可以看到文本不是很大，沒有省略號但樣式仍然適用。任何幫助深表感謝！

https://plnkr.co/edit/cDOxlXRK6QfynVdpCbCT?p=preview

我的CSS低於：

/* Styles go here */ 
table td.text { 
    max-width: 10px; 

} 

table td.text span { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: inline-block; 
    max-width: 100%; 
} 
table td.text:hover span{ 
    border: 2px solid #000000; 
    background-color: #ffffff; 
    padding: 5px; 
    overflow: visible; 
    white-space: normal; 
    height: auto; 
    /* just added this line */ 
    position:absolute; 
} 

table td.text:hover span:empty { 
    display:none; 
}

我的HTML低於：

<table> 
    <thead> 
    <tr class="text-center"> 
     <th>Column1</th> 
     <th>Column2</th> 
     <th>Column3</th> 
     <th>Column4</th> 
    </tr> 
    </thead> 
    <tr> 
    <td class="text"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></td> 
    <td class="text"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></td> 
    <td class="text"><span>Lorem </span></td> 
    <td class="text"><span></span></td> 
    </tr> 

</table>

來源

2017-06-12 Steven.lin

這是有道理的造型仍然會發生。你並沒有真正做出任何事情來使它在表格中的數據長度的條件。你告訴它隱藏每個表格元素的溢出，並且只在mouseover上顯示它，並且它確實如此。

如果我是你，我會製作一個javascript方法來確定你的元素是否在應用CSS類之前有數據溢出（顯然這需要一個默認的CSS類，然後將其改變爲溢出類如果條件得到滿足，可以用jQuery輕鬆完成）。

這個問題可能幫助：javascript css check if overflow

來源

2017-06-12 15:30:47

有沒有辦法使用工具提示來做到這一點？ –

如何以用戶友好的方式在表格中顯示溢出文本？

回答

相關問題