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

Question

{코드...} 이 효과를 어떻게 구현하나요? ​​여기에 적힌 높이가 고정되어 있어서 이상적이지 않은 것 같은데 이 텍스트의 양이 확실하지 않습니다.

ringa_lee · Answer

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

으아악

巴扎黑 · Answer

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

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

女神的闺蜜爱上我 · Answer

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

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