Ändern der Breite von div je nach Größe des längsten möglichen Textes

Question

Ich möchte eine Schaltfläche erstellen, die einen anderen Text anzeigt, wenn Sie den Mauszeiger darüber bewegen. Ich möchte eine feste Breite, aber ich weiß nicht die Breite des längsten möglichen Textes, da ich Javascript-Übersetzungen verwende und die möglichen Inhalte unterschiedlich lang sein werden.

Gibt es eine Möglichkeit, die Schaltfläche die gleiche Breite wie der längste Text nur mit CSS?

Hier ist ein fiddle.

.hover-btn .hover-on, 
 
.hover-btn:hover .hover-off { 
 
    display: none; 
 
} 
 
.hover-btn:hover .hover-on, 
 
.hover-btn .hover-off { 
 
    display: inline; 
 
}

<button id="myButton" class="hover-btn"> 
 
    <span class="hover-off">hey!</span> 
 
    <span class="hover-on">click me!</span> 
 
</button>

Answer 1

Eine Möglichkeit ist es, das Element ohne display:none so nicht entfernen sie aus dem Fluss verstecken. Versuchen Sie folgendes:

.hover-btn .hover-on, .hover-btn:hover .hover-off { 
 
    height: 0; 
 
    display:block; 
 
    overflow:hidden; 
 
    visibility:hidden; 
 
} 
 
.hover-btn:hover .hover-on, .hover-btn .hover-off { 
 
    height:auto; 
 
    visibility:visible; 
 
}

<button id="myButton" class="hover-btn"> 
 
    <span class="hover-off">hey!</span> 
 
    <span class="hover-on">click me!</span> 
 
</button>