使用CSS不工作的文本寬度轉換

Question

我有一個div，我想顯示一個人的名字。

我想只顯示在正常狀態下的人的名字。當您懸停時，姓氏應顯示在名字的右側，其寬度從0擴展到正常寬度。所有這些文字都與右側對齊。

如果我應用過渡到姓氏跨度它甚至不顯示它。
我也試過最大寬度（作爲一個人在這裏：http://jsfiddle.net/qP5fW/87/），但它不起作用。 所以我做了一個包裝div，使用寬度而不是最大寬度，現在它可以工作，只是它根本不顯示轉換。

我懷疑問題是與「汽車」財產，但如果有人知道如何使過渡工作，我將非常感激。

這裏是我的小提琴：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

您可以使用max-width，因爲它不會與width: auto工作。

只要確保max-width值足夠大以容納最寬的文本，或者您需要一個計算負載的腳本。

由於max-width會比某些內容寬一些，因此可以使用較短的時間進行反轉，以使其在寬度較小的文本上看起來更好。

.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>