Css div 동적 콘텐츠의 높이/너비 전환

Question

<div>Text here</div> 

하자. 텍스트 필드가있는 div가 있고 더 많은 텍스트를 입력하고 줄 바꿈을 만들 때 div가 원활하게 높이/너비 전환을 수행하길 원합니다. Javascript를 사용하지 않고 css로이 전환을 수행하는 간단한 방법이 있습니까?

텍스트는 어떻게 편집합니까? 자바 스크립트 또는 AJAX 호출.

Answer 1

입력 할 때 확장되는 상자를 얻는 가장 쉬운 방법은 contenteditable 속성을 사용하는 것입니다.

<div contenteditable>Type here...</div> 

Here은 데모입니다.

텍스트를 contenteditable 요소에 입력하면 부드럽고 점진적인 전환 효과를 얻을 수 있다고 생각하지 않습니다. height: auto 전환 및 백분율 높이에 대한 브라우저 지원 부족으로 인해 동적 요소 높이의 전환이 이미 매우 어려웠습니다.

누군가가 매우 영리한 CSS 솔루션을 제시하지 않는 한 슬프게도 당신이 찾고있는 전환 효과는 JavaScript가 필요할 것입니다. 주의 사항이기는하지만

Answer 2

영리한 솔루션 :

1. 당신이 (0이 작동합니다) 당신이 처음에 설정할 수있는 높이를 알고 있어야합니다
2. 정확히 깨끗한.

높이가 아닌 높이를 사용하십시오. div의 콘텐츠의 기본 높이가 무엇이든간에 작은 것으로 시작한 다음 콘텐츠의 크기와 일치하도록 확장되므로 다소 높은 값으로 설정하십시오. 당신은 아마 overflow : hidden도 원할 것입니다. 그래서 당신은 실제로 마스킹이 전환되는 것을 볼 수 있습니다.

.test{ 
    overflow: hidden; 
    transition: 1s linear; 
} 
.test.begin{ 
    max-height: 15px; 
} 
.test.end{ 
    max-height: 400px; 
} 

애니메이션 속도는 최대 높이의 차이를 기반으로합니다. 1 초 만에 100px 이상의 애니메이션 효과를 내더라도 1 초에 385px 이상의 애니메이션 효과를 낼 수 있습니다.

편집 : ...

<textarea> 

난 아직 내 아침 커피를했다 havent 한,하지만 당신은 당신이 알고, 당신이 원하지 않는 확신?