상세 컨텐츠

본문 제목

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

CODING/React.js

by 뚜뚜 DDUDDU 2022. 12. 22. 16:10

본문

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

혹은, 해당 공간을 넘어서 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;

요거다.

 

관련글 더보기

댓글 영역