[CSS] 항상 헷갈리는 ellipsis 처리, 관련 CSS property

text-ellipsis가 적용되도록 하려면

• 정해진 width 지정 필수
• 아래 3개 속성이 필수

  white-space: nowrap // text가 길어도 다음 줄로 넘어가지 않게 함
  overflow: hidden // width를 넘으면 숨김
  text-overflow: ellipsis // text에 ...이 생기게 함

그런데 정해진 width라는 것은 width: 20rem 이런식으로 하지 않아도 된다. 예를 들어 grid 및 grid-template-columns 속성을 통해 width를 정해줄 수도 있다.

아래 예시는 TailwindCSS로 작성하였다. (whitespace-nowrap, overflow-hidden, text-ellipsis)

<div class="description w-96 grid grid-cols-[4rem_1fr] p-4 bg-slate-200">
  {/* container의 grid-template-columns 속성에 의해 고정 width인 4rem 가짐 */}
  <p class="label whitespace-nowrap overflow-hidden text-ellipsis font-bold">
    Short
  </p>
  {/* container의 width가 정해져 있기 때문에 1fr이라도 width에 제한이 생김 */}
  <p class="content whitespace-nowrap overflow-hidden text-ellipsis">
    This is a very very very very very very long content
  </p>
  <p class="label whitespace-nowrap overflow-hidden text-ellipsis font-bold">
    Loooooong
  </p>
  <p class="content whitespace-nowrap overflow-hidden text-ellipsis">
    A short content
  </p>
</div>

이렇게 작성했을 때

이와 같이 잘 보이는 것을 확인할 수 있다.