Afficher le texte intégral au survol avec débordement de texte : points de suspension

Inspiré par ce post où quelqu'un

vous souhaitez avoir une propriété de titre active uniquement pour les éléments de liste qui déclenchent la règle de débordement de texte sur la liste. Vous pouvez donc passer la souris sur n'importe quel texte tronqué et voir une info-bulle de son texte intégral

Voici mon approche.

<div>
    <span><span>Some longer text visible on hover</span></span>
    <span><span>Another longer text visible on hover</span></span>
    <span><span>Short text</span></span>
</div>

div {
    display: grid;
    grid-template-columns: 100px 100px 100px;
}
div>span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
span>span:hover {
    position: absolute;
    background-color: rgba(5, 255, 255, 1);
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!