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属性，最大高度对行不起作用。

我想在最大高度变化上添加过渡效果，以更柔和的方式显示它。

我尝试过使用“过渡”属性，但没有效果。这可能吗？我该怎么做？