CSS Grid 환경에서 Text Ellipsis(white-space: nowrap)가 동작하지 않는 이유와 해결 방법

1. 문제의 배경

현대적인 웹 레이아웃을 구성할 때 CSS Grid는 매우 강력한 도구입니다. 특히 grid-template-columns: repeat(3, 1fr)와 같은 선언은 컨테이너를 균등하게 3등분 하는 직관적인 방법을 제공하죠.

하지만 이 그리드 아이템 내부에서 긴 텍스트를 한 줄로 제한하고 말줄임표(...)를 표시하려 할 때 예상치 못한 문제에 직면하게 됩니다. 분명히 아래와 같은 표준적인 Ellipsis 스타일을 적용했음에도 불구하고, 텍스트가 부모의 너비를 무시하고 삐져나오거나 그리드 셀 자체가 텍스트 길이에 맞춰 늘어나 버리는 현상이 발생합니다.

/* 일반적인 텍스트 말줄임 설정 */
.title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

이 현상은 특히 대시보드나 포스트 리스트 카드를 구현할 때 빈번하게 발생하며, 개발자를 당황하게 만드는 대표적인 CSS 이슈 중 하나입니다.

2. 해결 방안 탐색

처음 이 문제를 접하면 z-index나 position: absolute 같은 엉뚱한 속성을 건드리게 되기도 합니다. 하지만 근본적인 원인은 Grid 아이템의 최소 너비 계산 방식에 있습니다.

문제를 해결하기 위해 고려할 수 있는 대안은 크게 두 가지입니다:

min-width: 0 설정: 그리드 아이템 자체에 최소 너비를 강제로 0으로 지정합니다.
minmax(0, 1fr) 사용: 그리드 트랙 정의 단계에서 최소 크기를 0으로 명시합니다.

HooneyLog에서는 더 선언적이고 그리드 시스템의 의도에 부합하는 minmax(0, 1fr) 방식을 권장합니다.

3. 핵심 개념 및 아키텍처

왜 단순히 1fr만 사용했을 때는 동작하지 않을까요? CSS Grid 명세에 따르면, 그리드 아이템의 기본 최소 크기(min-width)는 auto입니다. 그리고 이 auto는 내부 콘텐츠의 크기인 min-content를 따르려고 합니다.

만약 white-space: nowrap이 설정된 긴 텍스트가 있다면, 그 아이템의 min-content는 텍스트 전체의 길이가 됩니다. 결과적으로 1fr은 min-content보다 작아질 수 없게 되어 말줄임표가 나타나기 전에 그리드 자체가 늘어나 버리는 것입니다.

4. 구현 및 트러블슈팅

해결 방법은 매우 간단합니다. 그리드를 정의할 때 최소값을 0으로 명시해주면 됩니다.

수정 전 코드

const GridContainer = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 문제 발생 지점 */
  gap: 20px;
`;

수정 후 코드 (Recommended)

const GridContainer = styled.div`
  display: grid;
  /* minmax(0, 1fr)을 통해 최소 너비를 0으로 제한 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
`;

이렇게 설정하면 그리드 아이템은 콘텐츠의 너비(min-content)에 구애받지 않고 부모가 허용하는 너비까지 줄어들 수 있게 됩니다. 이때 아이템 내부의 overflow: hidden과 만나면서 비로소 text-overflow: ellipsis가 정상적으로 동작하게 됩니다.

5. 결과 및 Trade-off

결과

레이아웃 안정성: 긴 타이틀이 들어와도 전체 그리드 레이아웃이 깨지지 않습니다.
반응형 대응: 화면이 작아질 때 그리드 셀이 유연하게 축소되며 말줄임 처리가 자연스럽게 이루어집니다.

Trade-off

가독성 이슈: 너무 좁은 영역에서 무리하게 말줄임을 적용할 경우, 사용자가 정보를 식별하기 어려울 수 있습니다. 이럴 때는 툴팁(Tooltip)을 제공하거나 반응형 브레이크포인트에서 그리드 열 개수를 조절하는 전략을 병행해야 합니다.

6. 마치며

CSS Grid는 편리하지만 fr 단위와 auto 너비 계산 사이의 미묘한 관계를 이해하지 못하면 이번 사례처럼 고전할 수 있습니다. "그리드 아이템 내부에서 말줄임이 안 된다면 minmax(0, 1fr)을 떠올리자"는 공식만 기억해도 많은 시간을 아낄 수 있을 것입니다.

참고 자료: