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

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

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

table cell

절차

1. 표에 table-layout: fixed를 준다.
2. 셀에 max-width: 0과 overflow 셋(overflow: hidden·text-overflow: ellipsis·white-space: nowrap)을 준다.

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;
}

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

함정 — overflow 셋만 주면 아무 효과가 없다. 표에 width를 주고, 표의 table-layout: fixed나 셀의 max-width: 0 중 하나는 있어야 한다(둘 다는 필요 없다 — Chrome 156·Firefox 150). 표 width 없이 max-width: 0만 주면 열이 0으로 접힌다.

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

자동 레이아웃의 셀은 내용 너비만큼 늘어나서 overflow가 잘라낼 경계가 없다. fixed는 열 너비를 표·col 너비로만 정해 내용이 끼어들 자리를 없애고¹, max-width: 0은 자동 레이아웃에서 셀이 내용 기반 너비를 주장하지 못하게 한다 — 다만 표 셀의 max-width는 CSS 2.1이 정의하지 않은 동작이라 브라우저 관행에 기댄다².

컬럼별 선택적 적용

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. table-layout - MDN: “The horizontal layout doesn’t depend on the contents of the cells because it depends only on explicitly set widths.” · “Cells use the overflow property to determine whether to clip any overflowing content, but only if the table has a known width” ↩

2. CSS 2.1 §10.4: “In CSS 2.1, the effect of ‘min-width’ and ‘max-width’ on tables, inline tables, table cells, table columns, and column groups is undefined.” ↩

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

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