Beschnittenen Text bei Hover mit CSS anzeigen

Question

Ich habe einen gemeinsamen Button-Stil für Buttons mit unterschiedlichen Bildunterschriften erstellt. Die Schaltfläche hat eine feste Breite, daher passt der Text manchmal nicht. Die Schrift kleiner zu machen hilft nicht, weil der Text dann so klein wird, dass er nicht lesbar ist. Meine Idee ist, dass der Text nach links kommt, so dass der Teil, der versteckt ist, beim Maus-Hover angezeigt wird. Der Text sollte jedoch nur verschoben werden, wenn er zu lang ist. Es sollte sich nicht bewegen, wenn es in den Knopf passt. Dies ist mein Code:

.button { 
 
    display: block; 
 
    font-size: 11px; 
 
    height:30px; 
 
    overflow: hidden; 
 
    padding: 3px 5px 0 0; 
 
    text-align: right; 
 
    text-overflow: " "; 
 
    white-space: nowrap; 
 
    width: 120px; 
 
    background-color: #ccc; 
 
    border-radius: 5px; 
 
    margin-bottom: 5px; 
 
} 
 

 
.button:hover { 
 
    padding-right: 120px; 
 
}

<a href="" class="button">Short</a> 
 
<a href="" class="button">Longer example</a>

es nicht funktioniert, als ob erwartet. Irgendwelche Ideen?

Vielen Dank.

Answer 1

Ändern Sie die direction des Textes bei Hover, so dass es auf der linken Seite statt der rechten überläuft.

.button { 
 
    display: block; 
 
    font-size: 11px; 
 
    height:30px; 
 
    overflow: hidden; 
 
    padding: 3px 5px 0 0; 
 
    text-align: right; 
 
    text-overflow: " "; 
 
    white-space: nowrap; 
 
    width: 66px; 
 
} 
 

 
.button:hover { 
 
    direction:rtl; 
 
}

<a href="" class="button">Short</a> 
 
<a href="" class="button">Longer example</a>

Bitte beachte, dass ich die Breite der Schaltfläche in diesem Snippet zu verkürzen, hatte das „länger Beispiel“ Überlauf tatsächlich zu machen.