테일윈드로 긴 url 줄이기: overflow-hidden, text-ellipsis, whitespace-nowrap

블로그 포스트 제목이나 링크가 너무 길어서 페이지를 어지럽히는 문제가 있으셨던 경험 없으신가요?

이럴 때 Tailwind CSS의 overflow-hidden, text-ellipsis, whitespace-nowrap를 사용하면, 긴 텍스트를 한 줄로 깔끔하게 정리하고 "..."으로 표시할 수 있습니다.

<div class="w-20 overflow-hidden text-ellipsis whitespace-nowrap">
  https://dietisdie.tistory.com/?tasdfyasdfpe=poasdfst&returasdfnURdsfaL=%2Fmasdfanageasdf%2Fposts%2F
</div>

이렇게 속성을 적용할 경우

https://dietisdie.tistory.com/... 

이렇게 표시됩니다.

---

1. overflow-hidden

• 내용이 부모 컨테이너의 크기를 넘으면 숨기기 위한 클래스입니다.
• 텍스트가 너무 길어도 화면 밖으로 넘치지 않고, 깔끔하게 잘립니다.
• 자식 요소가 부모의 너비를 초과할 때 유용합니다.

2. text-ellipsis

• 텍스트가 잘릴 때 "..."을 표시합니다.
• overflow-hidden과 함께 사용해야 원하는 대로 작동합니다.

3. whitespace-nowrap

• 텍스트를 한 줄로 고정해 줍니다.
• 만약 이 클래스를 생략하면, 텍스트가 여러 줄로 나눠질 수 있어요.