tailwind -line-clamp 라이브러리 긴 글을 3줄로 제한한다.

tailwind 를 사용하면서 tailwind -line-clamp 라이브러리를 사용해 보게 되었다.

 

✅ 왜 사용하게 되었는가?

: UI상 내용은 상관이 없지만 제목 같은 부분은 대부분 짧게 지정을 하거나 글이 길경우 ... 으로 하여 표시가 된다.

tailwind는 라이브러리를 설치후 3줄인 제목을 2줄이나 1줄로  표시할 수 있기에 사용해본다.

 

 

🌈 사용법

 

1. npm 설치

npm install @tailwindcss/line-clamp

2. tailwind .config. js 에 plugins 추가

3. 적용해보기

 

예시 ) line-clamp-2 => 2줄이 넘어가게 하고싶지 않아 그이후로는 ... 으로 표시되게  해줘

 

적용화면을 보면 제목이 3줄이 넘는 경우 2줄만 표시가 되며 ... 으로 나오는걸 확인할 수 있다.

 

적용이 안되는 경우 다시 npm 을 재시작 하면 해결 되는경우가 있다.