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

我有一个动态加载数据的表格，当单元格中的文本很大时，我想用省略号将它包裹起来，并且在鼠标悬停时优雅地显示完整的数据。目前我只是使用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

有没有办法使用工具提示来做到这一点？ –

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

回答

相关问题