텍스트 ellipsis는 컨텍스트마다 패턴이 다르다.

언제 — 먼저 어느 컨텍스트인지 가른다.

컨텍스트	어디로
display: table-cell	아래 절차
flexbox	맨 아래 참고 링크
여러 줄(multiline)	맨 아래 참고 링크

table cell

절차

1. 표에 table-layout: fixed를 준다.
2. 셀에 max-width: 0과 overflow: hidden 셋을 함께 준다.

table {
  table-layout: fixed;
  width: 100%;
}

col:nth-child(1) { width: 30%; }
col:nth-child(2) { width: 40%; }
col:nth-child(3) { width: 30%; }

td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

확인: 긴 텍스트가 든 셀이 표를 옆으로 밀어내지 않고 …로 잘리는가.

함정 — table-layout: fixed와 max-width: 0은 반드시 함께여야 한다. overflow 셋만 주면 아무 효과가 없다.

/* ❌ 아무 효과 없음 */
td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

display: table-cell은 width 제약 없이 content 크기에 맞게 늘어나서, overflow가 동작할 명시적 width bound가 없기 때문이다. 그리고 max-width: 0이 실제 0px이 되는 게 아니다 — table-layout: fixed 안에서 “이 셀은 content 기반으로 너비를 주장하지 않는다”는 시그널로 작동해, colgroup/th에서 받은 너비 안에서 overflow가 동작한다.

컬럼별 선택적 적용

td:not(.col-action) {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

td.col-action {
  white-space: nowrap;
}

셀 안에 복합 요소

버튼/배지 등이 텍스트와 함께 있을 때 inner wrapper에 위임.

td {
  max-width: 0;
}

td > div {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

td > div > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

React 컴포넌트 패턴

TanStack Table size 옵션과 조합.

const columns = [
  columnHelper.accessor('name', {
    size: 200,
    cell: ({ getValue }) => (
      <span style={{ display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
        {getValue()}
      </span>
    ),
  }),
]

<table style={{ tableLayout: 'fixed', width: '100%' }}>
  <colgroup>
    {table.getFlatHeaders().map(header => (
      <col key={header.id} style={{ width: header.getSize() }} />
    ))}
  </colgroup>
  ...
</table>

재사용 셀 래퍼:

function EllipsisCell({ children }: { children: React.ReactNode }) {
  return (
    <td style={{ maxWidth: 0 }}>
      <div style={{
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
      }}>
        {children}
      </div>
    </td>
  )
}

flexbox / multiline 참고

• Using Flexbox and text ellipsis together · Leonardo Faria¹
• Multiline truncated text with “show more” button (with just CSS) - Paul Bakaus’ blog²
• Recreating MDN’s Truncated Text Effect

---

Footnotes

1. flexbox | 파일명에 ellipsis 효과 적용, 단 파일 확장자는 제외. ↩

2. :truncated 개념이 없기 때문에 ResizeObserver와 영역값을 체크해서 구현. ↩