[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

🤷‍♂️ Tailwind 한줄, 두줄, 세줄 효과

---

프로젝트 진행중 배너 링크에 URL 길이가 너무 길어서 3줄 효과 처리를 해야 했습니다.

React + Tailwind CSS 셋팅된 프로젝트 여서 CSS 파일 & style 태그를 사용하지 않고 className 속성을 활용해서 CSS 스타일링 해야 했습니다. 

 

기존에 방식으로 한줄 효과 스타일링을 하려고 했으나 tailwind CSS 방식이 달라서 다른 좋은 방법을 찾았습니다.

 

한줄 효과 기존 CSS 방식

p {
   width: 6rem;
   text-overflow: ellipsis;
   overflow: hidden;
   word-break: break-word;
    
   display: -webkit-box;
   -webkit-line-clamp: 3; // 원하는 라인 수 1줄, 2줄, 3줄
   -webkit-box-orient: vertical
}

 

기존 방식인 위에 CSS 속성을 적용하면 되지만 Tailwind CSS에서는 webkit 속성을 적용할 수 없습니다.

Tailwind CSS에서 적용 방법은 customizing 으로 한줄 효과를 적용 시킬수 있습니다.

 

Next.js와 tailwind 적용 방법

https://cometruedream.tistory.com/245

Next JS에서 tailwind 적용 안될때 해결방법

 

 

 

1. 전역으로 사용하기 위해서 globals.css 파일에 셋팅

 

 

@layer base 안에 .text-overflow 클래스를 적용해준다.

 

2. globals.css .text-overflow 적용 후 사용하려는 HTML 태그에 className을 적용을 해준다.

 

 

한줄 효과 기존 CSS 방식

 

 

 

 

 

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리