CSS가 작동하지 않는 텍스트의 너비 전환

Question

나는 사람의 이름을 표시하고자하는 div가 있습니다.

정상적인 상태에서 사람의 이름 만 표시하고 싶습니다. 마우스를 올리면 성이 오른쪽의 너비와 함께 0에서 표준 너비로 확대되어야합니다. 이 텍스트는 모두 오른쪽에 정렬됩니다.

마지막으로 이름 스팬으로 전환을 적용해도 표시되지 않습니다.
나는 또한 max-width (사람이 여기에서하는 것처럼 : http://jsfiddle.net/qP5fW/87/)와 함께 시도했지만 작동하지 않습니다. 그래서 래퍼 div를 만들었고 max-width 대신 width를 사용했고 이제는 작동합니다. 전환 만 표시하지 않습니다.

문제는 "자동"속성으로 판단되지만 누구나 전환 작업을 수행하는 방법을 알고 있다면 매우 감사하게 생각합니다.

여기 내 바이올린입니다 : 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 : 그것은 width: auto 작동하지 않습니다으로

.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를 사용할 수 있습니다.

값이 가장 넓은 텍스트를 수용 할만큼 충분히 크거나로드시이를 계산하는 스크립트가 필요하다는 것을 확인하십시오.

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>