텍스트 ellipsis 처리. 컨텍스트(table-cell, flex, multiline)에 따라 패턴이 다름.
table cell
display: table-cell은 width 제약 없이 content 크기에 맞게 늘어남. overflow: hidden이 동작하려면 명시적 width bound가 필요한데, table 기본 레이아웃이 그것을 허용하지 않음.
/* ❌ 아무 효과 없음 */
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}해법: table-layout: fixed + max-width: 0.
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;
}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 Faria1
- Multiline truncated text with “show more” button (with just CSS) - Paul Bakaus’ blog2
- Recreating MDN’s Truncated Text Effect