백분율로 정의 된 경우에도 DIV의 내용을 숨기기

Question

클릭하면 축소 될 수있는 DIV를 얻으려고합니다. 이 simple example의 경우 전체 DIV에서 직접 클릭이 트리거됩니다.

#fixed { width: 200px; } 
#fixed input { width: 180px; } 
.short_fixed { width: 50px !important; } 

$('#fixed').click(function(){ 
    $(this).toggleClass('short_fixed'); 
}); 

내 example 방송

<div id='fixed'> 
    <input type='text'> 
</div> 

2가지 경우 : 폭 객체 "고정"처음 사용 번째 사용 "비율"폭있다. 클릭

, 그것은, 첫째 DIV 오버 플로우 내용을 숨기는 결과, 그 내용의 크기를 조정하지 않고 잘라하지만, 컨테이너의 폭에 따라 컨텐츠를 적응 픽셀

대신 때문에 바람직하지 않다 기반의 폭, 두 번째를 가질 필요 %를 사용할 수있게하지만 붕괴시에는 내용을 강조하지 않습니다.

그래서 두 번째 예제와 같이 컨테이너 너비의 % (너비도 가질 수 있음)의 콘텐츠 너비를 설정하고 싶습니다. 그러나 컨테이너 축소시 첫 번째 동작과 비슷합니다.

Answer 1

당신의 CSS에

#variable input { width:100%; min-width: 180px;} 

를 추가, 그래서 비율을 유지하지만 내용이 demo here

Answer 2

은 토글 기능을 bettween display: block 및 display: none을 전환 참조 붕괴

에 숨길 것이 행해져 Yout 것 같다 최상의 내기