[CSS] Textarea 말줄임 표시, 줄수제한

[CSS] Textarea 말줄임 표시, 줄수제한

 

안녕하세요. 오늘은 CSS를 활용해, Textarea의 줄수를 제한해서 보여주는 방법에 대해 알아 보겠습니다.

 

"-webkit-line-clamp" 속성을 이용해서 보여지는 줄 수를 제한할 수 있습니다.

단, "-webkit-line-clamp" 속성이 실행되기 위해서는

"display: -webkit-box" , "-webkit-box-orient: vertical" 로 설정되어 있어야 합니다.

 

예시코드

display: -webkit-box;
-webkit-line-clamp: 2; // 줄수, 2일경우 2줄
-webkit-box-orient: vertical;
 line-height: 1.8;
 overflow: hidden;