const span = document.querySelectorAll('td>span')
const getCells = td => td.target.closest('tr').querySelectorAll('td>span')
span.forEach(e => e.addEventListener(
"mouseenter",
(event) => {
getCells(event).forEach(child => child.classList.add('heightAuto'))
},
false
));
span.forEach(e => e.addEventListener(
"mouseout",
(event) => {
getCells(event).forEach(child => child.classList.remove('heightAuto'))
},
false
));
table {
border-collapse: collapse;
}
td>span {
border: 1px solid black;
padding: 5px;
overflow: hidden;
transition: all 1s ease-in-out;
max-height: 60px;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
}
.heightAuto {
max-height: none !important;
}
<table>
<tr>
<td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
<td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
<td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
<td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
<td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
</tr>
<td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
<td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
<td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
<td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
<td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
</tr>
<td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
<td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
<td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
<td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
<td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
</tr>
</table>
示例:https://codepen.io/chrisspb/pen/KKxxqoo
我为表中的每一行设置了最大高度限制,当鼠标悬停在一个单元格上时,该行的所有单元格都显示其全长。为此,我必须在“td”中添加一个HTML属性,最大高度对行不起作用。
我想在最大高度变化上添加过渡效果,以更柔和的方式显示它。
我尝试过使用“过渡”属性,但没有效果。这可能吗?我该怎么做?
1条答案
按热度按时间ilmyapht1#
您不能转换到
none
或auto
等值或从这些值转换;在下面的例子中,我使用了1000 px,但是你可以使用任何你喜欢的数字。