글자가 넘칠 때 ...로 생략하는 법 - react, tailwind css

개발중에 일정 공간내에서 글자수가 넘치는 경우, 아래칸까지 공간을 차지하게 되거나

혹은, 해당 공간을 넘어서 overflow가 될 수 있다.

이렇게 말이다..

이를 방지하기 위해서 글자가 넘치면 넘치는 글자는 생략하고 (...)으로 생략기호를 자동으로 넣어주면 좀 더 깔끔하게 CSS를 꾸밀 수 있다.

이렇게 생략기호 처리

tailwind에서는

<p className="max-w-[180px] flex-grow overflow-hidden text-ellipsis whitespace-nowrap">

이렇게 입력하면 되는데 width는 반드시 지정해주어야 그 범위 이상 넘어가면 생략할 수 있도록 만든다.

overflow-hidden text-ellipsis whitespace-nowrap

 

위 속성은

일반 css에서는

 

overflow: hidden; 

text-overflow: ellipsis; 

white-space: nowrap;

요거다.