Breite Übergang von Text mit CSS funktioniert nicht

Question

Ich habe eine Div, wo ich den Namen einer Person zeigen möchte.

Ich möchte nur den Vornamen der Person im normalen Zustand zeigen. Wenn Sie den Mauszeiger bewegen, sollte der Nachname rechts neben dem ersten Namen erscheinen, wobei die Breite von 0 bis zur normalen Breite reicht. All dieser Text ist nach rechts ausgerichtet.

Wenn ich den Übergang auf die Nachname-Spanne anwenden, zeigt es es nicht einmal an.
Ich habe auch versucht mit max-width (wie ein Kerl macht hier: http://jsfiddle.net/qP5fW/87/), aber es funktioniert nicht. Also habe ich ein Wrapper div gemacht, benutzte Breite statt max-width und jetzt funktioniert es, nur zeigt es den Übergang überhaupt nicht.

Ich vermute, das Problem ist mit der "Auto" -Eigenschaft, aber wenn jemand weiß, wie man den Übergang arbeiten kann, wäre ich sehr dankbar.

Hier ist meine Geige: https://jsfiddle.net/drywrsy6/

HTML:

<div class="name"> 
    <span class="first">John</span> 
    <div class="last-wrapper"> 
    <span class="last">Doe</span> 
    </div> 
</div> 

CSS:

.name { 
    border: 1px solid lightgrey; 
    margin: 10px auto 0px auto; 
    padding: 5px; 
    width: 300px; 
    font-size: 2em; 
    text-align: right; 
    overflow: hidden; 
    white-space: nowrap; 
} 

.first { 
    font-style: italic; 
} 

.last-wrapper { 
    display: inline-block; 
    vertical-align: bottom; 
    overflow: hidden; 
    width: 0; 
    transition: all 1s; 
} 

.last { 
    color: red; 
} 

.name:hover .last-wrapper { 
    width: auto; 
} 

Answer 1

Sie können max-width verwenden, da es nicht mit width: auto arbeiten.

Stellen Sie sicher, dass der Wert max-width groß genug ist, um den breitesten Text aufzunehmen, oder Sie benötigen ein Skript, das dies beim Laden berechnet.

Da die max-width etwas breiter als einige Inhalte ist, kann man eine Übergangsdauer mit kürzerer Zeit auf der Rückseite haben, damit es auf weniger breitem Text besser aussieht.

.name { 
 
    border: 1px solid lightgrey; 
 
    margin: 10px auto 0px auto; 
 
    padding: 5px; 
 
    width: 300px; 
 
    font-size: 2em; 
 
    text-align: right; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
.first { 
 
    font-style: italic; 
 
} 
 

 
.last-wrapper { 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
    overflow: hidden; 
 
    max-width: 0; 
 
    transition: all 0.3s; 
 
} 
 

 
.last { 
 
    color: red; 
 
} 
 

 
.name:hover .last-wrapper { 
 
    max-width: 100px; 
 
    transition: all 0.7s; 
 
}

<div class="name"> 
 
    <span class="first">John</span> 
 
    <div class="last-wrapper"> 
 
    <span class="last">Doe</span> 
 
    </div> 
 
</div>