我有一个动态加载数据的表,当单元格中的文本很大时,我想用省略号包装它,鼠标悬停时优雅地显示完整的数据。 目前我只是使用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>
答案 0 :(得分:0)
造型仍然会发生是有道理的。你还没有真正做任何事情让它以表中数据的长度为条件。你告诉它隐藏每个表格元素的溢出,只在鼠标悬停时使其可见,它就是这样。
如果我是你,我会制作一个javascript方法来确定你的元素在应用CSS类之前是否有溢出数据(显然这需要一个默认的CSS类,然后如果改为溢出类,满足条件。这可以通过jQuery轻松完成。
这个问题可能有所帮助:javascript css check if overflow