Código CSS

 .table { display: grid; grid-template-columns: 170px 300px; border: 1px solid black; } .tr { display: contents; } .td { border-left: 1px solid black; overflow: hidden; text-overflow: ellipsis; }

código JSX

 import "./styles.css"; export default function App() { return ( <div className="table"> <div className="tr"> <div className="td"> abcsfsaffadsfsdfsafsdsfsadfdasdfasfasdffasfasfasdfsd </div> <div className="td">abcsfs</div> </div> </div> ); }

Puedes ver el código en Codesandbox

Puede ver que tenemos el desbordamiento de la primera columna, pero la segunda columna no

Al pasar el mouse, espero mostrar cuadros para la columna de desbordamiento solo para mostrar el texto completo, como el siguiente

El problema es cómo detectar si una columna div se desborda para mostrar el cuadro.