javascript - jq 고정 높이 텍스트 확장 및 축소

Question

으아아아

이 효과를 얻는 방법은 무엇입니까? ​​축소하면 확장 화살표가 변경됩니다
효과를 작성해 보았습니다. 여기 글의 높이는 고정되어 있지만 텍스트의 양은 불확실하기 때문에 이상적이지 않은 것 같습니다
demo

Answer 1

p의 외부 레이어에 레이어를 직접 감싸고, 외부 오버플로를 숨기고, p의 높이 설정을 가져옵니다.
p의 기본 여백에 주의하세요. 다음 예에서는 상위 요소의 패딩을 사용하여 오프셋합니다.

으아악

Answer 2

실제로는 매우 간단합니다.
텍스트 수에 따라 확장하거나 축소하려면 length来设定判断条件,当长度小于的时候format一份html，这个html上面没有图标，当长度大于规定长度时，收缩时，对所有文字字符串进行截取然后拼接一个展开的图标，这个font-awesome많은 텍스트에 대응하여 페이지에 표시한 다음 동일한 루틴을 사용하여 확장하면 됩니다. 문자열을 가로챌 필요가 없으면 모든 문자열을 축소된 아이콘으로 연결한 다음 아래에 이전 구현의 특정 예를 제공했습니다.

아이디어와 구현을 제공하는 것으로 충분합니다. 으아악

Answer 3

애니메이션의 경우 다음을 시도해 보세요:
demo

며칠 전 @aunt님의 답변(여기)을 읽고 영감을 얻었습니다.
핵심은: 고정된 높이 없이 확장하려면 먼저 높이를 자동으로 설정한 다음 getComputedStyle를 사용하여 높이를 가져온 다음 높이를 0으로 설정하고 얻은 높이를 사용하여 애니메이션을 적용하는 것입니다.