Vollständigen Text beim Schweben mit Textüberlauf anzeigen: Auslassungspunkte

Inspiriert von diesem Beitrag, wo jemand

Sie möchten eine aktive Titeleigenschaft nur für die Listenelemente haben, die die Textüberlaufregel für die Liste auslösen. Sie können also mit der Maus über einen abgeschnittenen Text fahren und einen Tooltip des vollständigen Textes sehen

Hier ist mein Ansatz.

<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);
}

Das obige ist der detaillierte Inhalt vonVollständigen Text beim Schweben mit Textüberlauf anzeigen: Auslassungspunkte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!