CSS 테이블 글자 자동 줄바꿈

테이블 셀 안의 긴 텍스트가 레이아웃을 깨지 않도록 자동으로 줄바꿈하는 CSS 기법입니다. 특히 동적 콘텐츠나 사용자 입력 데이터를 표시할 때 필수적입니다.

언제 사용하나요?

• 테이블에 긴 URL이나 이메일 표시


• 사용자 입력 데이터 테이블


• 코드나 로그 데이터 표시


• 반응형 테이블 레이아웃

word-break 속성

<style>
/* 기본: 단어 단위 줄바꿈 */
table td {
    word-break: normal;
}

/* 어디서든 줄바꿈 (CJK 텍스트에 적합) */
table td {
    word-break: break-all;
}

/* 단어가 너무 길 때만 줄바꿈 */
table td {
    word-break: break-word; /* 비표준, 대부분 지원 */
}
</style>

<!-- 영문/URL에 효과적 -->
<table>
    <tr>
        <td style="word-break: break-all;">
            https://www.example.com/very/long/path/to/resource
        </td>
    </tr>
</table>

overflow-wrap (word-wrap)

<style>
table td {
    /* 단어가 넘칠 때만 줄바꿈 */
    overflow-wrap: break-word;
    
    /* 구버전 호환 */
    word-wrap: break-word;
}
</style>

<!-- word-break vs overflow-wrap 차이
word-break: break-all → 모든 문자 경계에서 줄바꿈
overflow-wrap: break-word → 넘칠 때만 줄바꿈 (단어 보존 우선)
-->

테이블 레이아웃 고정

<style>
/* table-layout: fixed 필수! */
table {
    table-layout: fixed;
    width: 100%;
}

table td {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 특정 열 너비 지정 */
table th:nth-child(1) { width: 100px; }
table th:nth-child(2) { width: auto; }
table th:nth-child(3) { width: 150px; }
</style>

<!-- table-layout: fixed가 없으면 줄바꿈 안됨! -->

완전한 예시

<style>
.responsive-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.responsive-table th,
.responsive-table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
    
    /* 줄바꿈 설정 */
    word-break: break-word;
    overflow-wrap: break-word;
    
    /* 공백 처리 */
    white-space: normal;
}

/* 말줄임 처리 (대안) */
.ellipsis td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
</style>

<table class="responsive-table">
    <thead>
        <tr>
            <th style="width: 80px;">번호</th>
            <th>내용</th>
            <th style="width: 120px;">날짜</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>아주긴텍스트가줄바꿈없이계속되는경우에도자동으로줄바꿈됩니다</td>
            <td>2024-01-15</td>
        </tr>
    </tbody>
</table>

white-space 속성

<style>
/* 줄바꿈 허용 (기본) */
td { white-space: normal; }

/* 줄바꿈 금지 */
td { white-space: nowrap; }

/* 공백/줄바꿈 그대로 유지 + 자동 줄바꿈 */
td { white-space: pre-wrap; }

/* 공백 유지 + 줄바꿈 금지 */
td { white-space: pre; }
</style>

하이픈 처리

<style>
table td {
    /* 자동 하이픈 (일부 언어만) */
    hyphens: auto;
    -webkit-hyphens: auto;
    
    /* 수동 하이픈 허용 */
    hyphens: manual;
}
</style>

<!-- 수동 하이픈 위치 지정 -->
<td>Pneumono&shy;ultra&shy;microscopic</td>

반응형 테이블

<style>
/* 모바일에서 스크롤 */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
}

/* 또는 셀을 세로로 배치 */
@media (max-width: 768px) {
    table, thead, tbody, tr, th, td {
        display: block;
    }
    
    td {
        word-break: break-word;
    }
    
    td::before {
        content: attr(data-label);
        font-weight: bold;
    }
}
</style>

주의사항

• table-layout: fixed 없이는 줄바꿈 제대로 안됨


• width 지정 필수 (100% 또는 고정값)


• break-all은 단어 중간에도 끊김 (가독성 저하)


• CJK(한중일) 문자는 기본적으로 글자 단위 줄바꿈