CSS 일정 너비를 초과한 텍스트 말 줄임표로 표시하기

소요 시간: 5분 조회수: 52

웹 개발을 할 때, 텍스트가 화면 밖으로 넘어가거나 제한된 공간(예: 표의 셀) 안에 내용을 보여줘야 하는 경우가 많다.

CSS를 활용해 말 줄임표(ellipsis)로 텍스트를 깔끔하게 처리하면 텍스트가 잘리지 않고 사용자의 시선을 끌면서도 가독성을 유지할 수 있다.


한 줄 텍스트 말 줄임표 처리

한 줄 텍스트가 특정 너비를 초과하는 경우, text-overflow 속성을 사용하여 말 줄임표로 처리할 수 있다.

예를 들어, 특정 너비를 초과하는 텍스트를 잘라내고 말 줄임표(...)로 표시하려면 다음과 같은 코드를 사용할 수 있다.

<div class="element">
  이 텍스트는 길어서 말 줄임표로 표시됩니다.
</div>
.element {
  white-space: nowrap;     /* 텍스트를 한 줄로 유지 */
  overflow: hidden;       /* 넘치는 부분을 숨김 */
  text-overflow: ellipsis; /* 말 줄임표(...)로 표시 */
  width: 200px;           /* 원하는 너비로 설정 */
}

렇게 하면 요소의 너비가 200px을 초과하는 경우, "이 텍스트는 길어서…"와 같이 말 줄임표가 나타난다.


max-width를 활용한 유연한 처리

보다 유연하게 텍스트를 처리하고자 할 때 max-width 속성을 활용할 수 있다. 이를 통해 고정된 너비 대신 최대 너비를 설정하여 텍스트가 가변적인 부모 요소에 맞춰 적절히 잘리도록 할 수 있다.

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

이 설정은 부모 컨테이너의 크기에 따라 요소의 너비가 동적으로 변하므로, 가로 공간을 유연하게 활용할 수 있다.

예를 들어 반응형 레이아웃을 사용하는 경우 max-width 속성을 설정하면 사용자 경험이 개선된다.

<div class="element" style="max-width: 300px;">
  이 텍스트는 부모 요소의 크기에 따라 유연하게 줄여지며, 말 줄임표로 처리됩니다.
</div>

이렇게 하면 부모 컨테이너의 크기에 맞게 텍스트가 최대 너비만큼만 표시되고 넘치는 경우 말 줄임표가 적용됩니다.


여러 줄 텍스트 말 줄임표 처리

여러 줄 텍스트에서도 말 줄임표를 사용하여 표시할 수 있다. CSS만으로 이를 구현하기 위해 -webkit- 속성을 활용한 방법이 대표적이다. 이는 특정한 경우에 매우 유용하며, 아래 코드를 통해 확인할 수 있다.

<div class="element">
  이 텍스트는 여러 줄로 길게 표시되지만, 최대 세 줄까지만 보이게 설정했습니다. 그 이상은 말 줄임표로 잘리게 됩니다.
</div>
.element {
  display: -webkit-box;            /* 플렉스 컨테이너와 유사한 박스 */
  -webkit-line-clamp: 3;          /* 표시할 줄 수 설정 */
  -webkit-box-orient: vertical;   /* 박스를 수직으로 정렬 */
  overflow: hidden;               /* 넘치는 부분을 숨김 */
  text-overflow: ellipsis;        /* 말 줄임표(...)로 표시 */
}

이 코드를 적용하면 텍스트가 세 줄을 초과할 경우 말 줄임표로 처리되며 가독성을 유지할 수 있다.


실제 활용 시 주의사항


결론

CSS의 text-overflow와 max-width 속성은 텍스트가 제한된 공간에서 넘치는 경우, 깔끔한 말 줄임표(ellipsis)로 표시하는 데 유용한 기능이다.

인기글

CSS 리스트