웹 퍼블리싱웹 퍼블리싱 · 중급

CSS overflow 해결: 긴 텍스트·min-width: 0·말줄임 실습

2026.09.12·수정 2026.09.14·약 29분·작성: 해비·블로그 소개
작성자:

CSS overflow 해결: 긴 텍스트·min-width: 0·말줄임 실습 대표 일러스트

짧은 제목으로 만들었을 때는 멀쩡한 카드가 실제 파일명을 넣는 순간 화면 밖으로 밀려나는 경우가 있습니다. 부모에 width: 100%를 주거나 글자 크기를 줄이기 전에, 어느 상자가 줄어들지 못하는지 확인해 보세요. 이 글은 긴 문자열을 한 줄로 줄이는 경우, 여러 줄로 보여 주는 경우, 표처럼 일부 영역을 스크롤하는 경우를 한 화면에서 비교합니다.

넘치는 콘텐츠와 넘치는 페이지를 구분하세요

실패 실험에는 공백 없는 긴 파일명을 넣었습니다. Flex 행의 텍스트 항목이 필요한 최소 너비를 유지하면서 상태 표시까지 바깥으로 밀어냅니다. 바깥 failure-lab에만 overflow-x: auto를 적용했으므로 실패 현상은 이 영역 안에서 좌우로 관찰할 수 있습니다. 페이지 전체를 overflow-x: hidden으로 덮지 않습니다. 그래야 어떤 요소가 실제 원인인지 숨기지 않고 비교할 수 있습니다.

가로 스크롤이 모두 오류인 것은 아닙니다. 열끼리 비교해야 하는 표는 작은 화면에서 필요한 너비를 유지하고, 표 영역만 스크롤하도록 설계할 수 있습니다. 반대로 본문 전체가 좌우로 움직여 문장 끝을 따라가야 한다면 읽기 흐름을 방해합니다. 개발자 도구에서는 문서 루트의 scrollWidth와 clientWidth를 비교하고, 실험 영역의 두 값은 별도로 보세요. 의도한 내부 스크롤 때문에 문서까지 넓어지는지를 구별하는 것이 첫 단계입니다.

min-width: 0은 줄어들 수 있다는 허용입니다

수정 행에서는 텍스트를 감싼 Flex 항목인 metadata에 min-width: 0을 줍니다. 가로 Flex의 자동 최소 크기는 콘텐츠에 영향을 받을 수 있으므로 flex: 1만으로는 긴 문자열을 충분히 줄이지 못할 수 있습니다. 이때 제목 안쪽 요소가 아니라 실제 Flex 항목에 최소 너비를 지정하는 것이 중요합니다. 여러 겹의 Flex가 있다면 바깥 항목도 줄어들 수 있는지 함께 살펴봐야 합니다.

min-width: 0 자체는 글자를 자르거나 줄바꿈하지 않습니다. 상자의 축소를 허용할 뿐이며, 그 안의 텍스트를 어떻게 보여 줄지는 다음 규칙에서 결정합니다. 이 두 책임을 구분하면 다른 콘텐츠가 사라지는 부작용을 줄일 수 있습니다. 상태 표시는 flex: 0 0 auto로 별도 공간을 유지합니다. 상태가 길어지는 실제 서비스에서는 그 문구도 여러 언어와 확대 상태로 검토해야 합니다.

말줄임은 세 속성과 제한된 너비를 함께 봅니다

한 줄 제목에는 white-space: nowrap, overflow: hidden, text-overflow: ellipsis를 적용합니다. nowrap은 줄바꿈을 막고 hidden은 넘친 부분을 잘라내며 ellipsis는 잘린 끝을 말줄임표로 표현합니다. 예제는 display: block인 제목이 부모에서 제공하는 너비를 사용하도록 했습니다. 부모가 끝없이 늘어나면 잘릴 상황이 생기지 않으므로 ellipsis만 선언해도 결과가 없는 이유가 여기에 있습니다.

파일명은 구분에 필요한 정보이므로 화면에서 줄였다고 원문 확인 방법까지 없애서는 안 됩니다. 예제는 바로 아래 details에서 전체 파일명을 펼쳐 볼 수 있게 했습니다. 마우스를 올려야만 나타나는 도움말에 의존하지 않아 키보드와 터치 환경에서도 같은 정보를 확인할 수 있습니다. 실제 목록에서 펼침 영역을 반복한다면 각 항목과 원문이 명확히 연결되도록 레이블도 함께 설계하세요.

읽어야 하는 본문은 줄바꿈을 우선하세요

긴 참조 식별자처럼 중간 공백이 없는 문자열에는 overflow-wrap: anywhere를 사용합니다. 공간이 부족할 때 문자열 중간에서 줄을 나눌 수 있어 카드 안에서 전체 값을 보여 줄 수 있습니다. 본문의 모든 단어를 무조건 끊는 방식과 달리 필요한 상황에서 줄바꿈 기회를 제공합니다. 파일명 원문을 펼쳤을 때에도 같은 규칙을 적용해 작은 화면에서 다시 가로 넘침이 생기지 않게 했습니다.

여러 줄 설명문을 한 줄 말줄임 규칙으로 처리하면 핵심 정보까지 숨어 버릴 수 있습니다. 제목은 한 줄, 설명은 여러 줄, 데이터 표는 부분 스크롤처럼 콘텐츠 역할에 따라 정책을 정하세요. 어느 방식이든 CSS가 내용을 삭제하는 것은 아니지만 시각적으로 접근 가능한 범위는 달라집니다. 사용자가 값을 복사하거나 비교해야 하는 업무라면 전체 내용을 쉽게 확인할 수 있는 방법이 필요합니다.

시작 파일에서 원인부터 고쳐 보세요

시작 파일은 수정 행의 min-width와 말줄임 규칙, 긴 본문의 줄바꿈 규칙을 비워 둡니다. 먼저 metadata에 최소 너비를 지정하고 상태 표시가 돌아오는지 확인하세요. 그다음 제목의 넘친 부분을 처리하고 마지막으로 긴 본문을 줄바꿈하세요. 각 단계를 한 번에 넣지 않고 따로 적용하면 축소와 잘림의 역할 차이가 더 선명해집니다.

너비 360px와 넓은 화면에서 파일명 끝에 말줄임표가 필요한지, 펼친 원문이 모두 읽히는지, 표의 마지막 열까지 내부 스크롤로 접근할 수 있는지 확인하세요. 실패 실험은 완성본에도 의도적으로 남아 있습니다. 그 영역에 가로 스크롤이 생기는 것은 학습 목적이며, 문서 자체에 가로 스크롤이 생기는 것은 별도로 해결할 문제입니다. 실제 검증 때는 텍스트를 더 길게 바꾸고 브라우저 확대 상태도 함께 살펴보세요.

Flex·Grid 항목의 최소 너비를 점검하고, 텍스트는 줄바꿈 또는 말줄임 중 필요한 방식을 선택합니다. 넓은 표는 해당 영역 안에서 스크롤하도록 구성합니다.
Flex·Grid 항목의 최소 너비를 점검하고, 텍스트는 줄바꿈 또는 말줄임 중 필요한 방식을 선택합니다. 넓은 표는 해당 영역 안에서 스크롤하도록 구성합니다.

완성 HTML 전체 코드

아래 코드를 index.html로 저장하고 같은 폴더에 style.css를 만드세요. 시작 파일의 연습용 주석을 먼저 작성한 뒤 완성본과 비교해도 좋습니다.

실습 파일

파일 경로를 확인하고 같은 프로젝트 안에 저장하세요. 이미지 등 소스 목록에 없는 파일과 실행 안내는 실습 ZIP에 포함되어 있습니다.

축소 가능한 영역과 줄바꿈 규칙을 나눠 페이지 전체의 가로 넘침을 막습니다. 수정 전은 시작 상태, 수정 후는 비교할 완성 상태입니다.

수정 전

index.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>CSS overflow 해결: 긴 텍스트·min-width: 0·말줄임 실습</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p class="note" style="padding: 16px">
      시작 파일: 수정 영역의 설명은 완성 목표입니다. style.css의 연습 주석에 안내된
      규칙을 적용해 보세요.
    </p>
    <main>
      <h1>긴 문자열이 레이아웃을 밀어낼 때</h1>
      <p>
        실패는 회색 실험 영역 안에서만 가로로 넘칩니다. 페이지 전체의 가로 스크롤과
        구분하세요.
      </p>
      <section>
        <h2>1. 실패: Flex 항목의 자동 최소 너비</h2>
        <p id="failure-help">
          아래 영역을 좌우로 스크롤하면 밀려난 상태 표시를 볼 수 있습니다.
        </p>
        <div
          class="failure-lab"
          role="region"
          aria-label="의도적 가로 넘침 실험"
          aria-describedby="failure-help"
          tabindex="0"
        >
          <div class="row">
            <div class="metadata">
              <strong class="filename"
                >BlogFlow_Responsive_Layout_Review_2026_September_ExtraLongFileName.pdf</strong
              ><span>원본 파일명</span>
            </div>
            <span class="status">준비</span>
          </div>
        </div>
      </section>
      <section>
        <h2>2. 수정: 한 줄 말줄임</h2>
        <div class="row fixed-row">
          <div class="metadata">
            <strong class="filename"
              >BlogFlow_Responsive_Layout_Review_2026_September_ExtraLongFileName.pdf</strong
            ><span>상태 영역의 공간을 유지합니다.</span>
          </div>
          <span class="status">준비</span>
        </div>
        <details>
          <summary>전체 파일명 보기</summary>
          <p class="full-name">
            BlogFlow_Responsive_Layout_Review_2026_September_ExtraLongFileName.pdf
          </p>
        </details>
      </section>
      <section>
        <h2>3. 수정: 본문은 줄바꿈</h2>
        <p class="wrapped">
          참조 식별자:
          BLOGFLOWRESPONSIVELAYOUTREFERENCEWITHOUTSPACES0123456789012345678901234567890123456789
        </p>
      </section>
      <section>
        <h2>4. 표: 필요한 부분만 가로 스크롤</h2>
        <p id="table-help">좁은 화면에서는 표 영역에 초점을 두고 좌우로 이동하세요.</p>
        <div
          class="table-scroll"
          tabindex="0"
          role="region"
          aria-label="검토 내역 표"
          aria-describedby="table-help"
        >
          <table>
            <caption>
              파일 검토 내역
            </caption>
            <thead>
              <tr>
                <th scope="col">파일</th>
                <th scope="col">담당</th>
                <th scope="col">상태</th>
                <th scope="col">검토일</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>레이아웃 검토 문서</td>
                <td>콘텐츠 팀</td>
                <td>검토 준비</td>
                <td>2026-09-12</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
    </main>
  </body>
</html>

style.css

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #f4f4f4;
  color: #252525;
  font-family: system-ui, sans-serif;
  line-height: 1.65;
}
main {
  width: min(100% - 32px, 880px);
  margin: 40px auto;
}
h1 {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  line-height: 1.3;
}
h2 {
  font-size: 1.25rem;
}
section {
  margin-block: 32px;
  padding-block: 12px;
  border-top: 1px solid #aaa;
}
a {
  color: inherit;
  text-underline-offset: 4px;
}
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #444;
  outline-offset: 4px;
}
code {
  overflow-wrap: anywhere;
}
.note {
  color: #505050;
}
.row {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: #e2e2e2;
}
.metadata {
  flex: 1;
}
.filename {
  display: block;
  white-space: nowrap;
}
.metadata span {
  display: block;
  color: #505050;
}
.status {
  flex: 0 0 auto;
  align-self: start;
  padding: 2px 8px;
  background: #ccc;
}
.failure-lab {
  overflow-x: auto;
}
.fixed-row .metadata {
  /* 연습: 축소 가능한 최소 너비 */
}
.fixed-row .filename {
  /* 연습: 넘침과 말줄임 */
}
details {
  margin-top: 16px;
}
summary {
  cursor: pointer;
}
.full-name,
.wrapped {
  /* 연습: 긴 문자열 줄바꿈 */
}
.wrapped {
  padding: 16px;
  background: #e2e2e2;
}
.table-scroll {
  overflow-x: auto;
}
table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  text-align: left;
}
caption {
  text-align: left;
  padding-block: 8px;
}
th,
td {
  padding: 12px;
  border-bottom: 1px solid #aaa;
}

수정 방법

index.html

index.html에서 아래 차이가 있는 위치를 수정하세요. -는 삭제할 줄, +는 추가할 줄이며 표시는 실제 코드에 넣지 않습니다.

축소 가능한 영역과 줄바꿈 규칙을 나눠 페이지 전체의 가로 넘침을 막습니다.

--- 수정 전/index.html
+++ 수정 후/index.html
@@ -7,10 +7,6 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <p class="note" style="padding: 16px">
-      시작 파일: 수정 영역의 설명은 완성 목표입니다. style.css의 연습 주석에 안내된
-      규칙을 적용해 보세요.
-    </p>
     <main>
       <h1>긴 문자열이 레이아웃을 밀어낼 때</h1>
       <p>

수정 후 탭의 전체 파일과 비교한 뒤 본문의 확인 절차를 실행하세요.

style.css

style.css에서 아래 차이가 있는 위치를 수정하세요. -는 삭제할 줄, +는 추가할 줄이며 표시는 실제 코드에 넣지 않습니다.

축소 가능한 영역과 줄바꿈 규칙을 나눠 페이지 전체의 가로 넘침을 막습니다.

--- 수정 전/style.css
+++ 수정 후/style.css
@@ -67,10 +67,11 @@
   overflow-x: auto;
 }
 .fixed-row .metadata {
-  /* 연습: 축소 가능한 최소 너비 */
+  min-width: 0;
 }
 .fixed-row .filename {
-  /* 연습: 넘침과 말줄임 */
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 details {
   margin-top: 16px;
@@ -80,7 +81,7 @@
 }
 .full-name,
 .wrapped {
-  /* 연습: 긴 문자열 줄바꿈 */
+  overflow-wrap: anywhere;
 }
 .wrapped {
   padding: 16px;

수정 후 탭의 전체 파일과 비교한 뒤 본문의 확인 절차를 실행하세요.

수정 후

index.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>CSS overflow 해결: 긴 텍스트·min-width: 0·말줄임 실습</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <h1>긴 문자열이 레이아웃을 밀어낼 때</h1>
      <p>
        실패는 회색 실험 영역 안에서만 가로로 넘칩니다. 페이지 전체의 가로 스크롤과
        구분하세요.
      </p>
      <section>
        <h2>1. 실패: Flex 항목의 자동 최소 너비</h2>
        <p id="failure-help">
          아래 영역을 좌우로 스크롤하면 밀려난 상태 표시를 볼 수 있습니다.
        </p>
        <div
          class="failure-lab"
          role="region"
          aria-label="의도적 가로 넘침 실험"
          aria-describedby="failure-help"
          tabindex="0"
        >
          <div class="row">
            <div class="metadata">
              <strong class="filename"
                >BlogFlow_Responsive_Layout_Review_2026_September_ExtraLongFileName.pdf</strong
              ><span>원본 파일명</span>
            </div>
            <span class="status">준비</span>
          </div>
        </div>
      </section>
      <section>
        <h2>2. 수정: 한 줄 말줄임</h2>
        <div class="row fixed-row">
          <div class="metadata">
            <strong class="filename"
              >BlogFlow_Responsive_Layout_Review_2026_September_ExtraLongFileName.pdf</strong
            ><span>상태 영역의 공간을 유지합니다.</span>
          </div>
          <span class="status">준비</span>
        </div>
        <details>
          <summary>전체 파일명 보기</summary>
          <p class="full-name">
            BlogFlow_Responsive_Layout_Review_2026_September_ExtraLongFileName.pdf
          </p>
        </details>
      </section>
      <section>
        <h2>3. 수정: 본문은 줄바꿈</h2>
        <p class="wrapped">
          참조 식별자:
          BLOGFLOWRESPONSIVELAYOUTREFERENCEWITHOUTSPACES0123456789012345678901234567890123456789
        </p>
      </section>
      <section>
        <h2>4. 표: 필요한 부분만 가로 스크롤</h2>
        <p id="table-help">좁은 화면에서는 표 영역에 초점을 두고 좌우로 이동하세요.</p>
        <div
          class="table-scroll"
          tabindex="0"
          role="region"
          aria-label="검토 내역 표"
          aria-describedby="table-help"
        >
          <table>
            <caption>
              파일 검토 내역
            </caption>
            <thead>
              <tr>
                <th scope="col">파일</th>
                <th scope="col">담당</th>
                <th scope="col">상태</th>
                <th scope="col">검토일</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>레이아웃 검토 문서</td>
                <td>콘텐츠 팀</td>
                <td>검토 준비</td>
                <td>2026-09-12</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
    </main>
  </body>
</html>

style.css

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #f4f4f4;
  color: #252525;
  font-family: system-ui, sans-serif;
  line-height: 1.65;
}
main {
  width: min(100% - 32px, 880px);
  margin: 40px auto;
}
h1 {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  line-height: 1.3;
}
h2 {
  font-size: 1.25rem;
}
section {
  margin-block: 32px;
  padding-block: 12px;
  border-top: 1px solid #aaa;
}
a {
  color: inherit;
  text-underline-offset: 4px;
}
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #444;
  outline-offset: 4px;
}
code {
  overflow-wrap: anywhere;
}
.note {
  color: #505050;
}
.row {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: #e2e2e2;
}
.metadata {
  flex: 1;
}
.filename {
  display: block;
  white-space: nowrap;
}
.metadata span {
  display: block;
  color: #505050;
}
.status {
  flex: 0 0 auto;
  align-self: start;
  padding: 2px 8px;
  background: #ccc;
}
.failure-lab {
  overflow-x: auto;
}
.fixed-row .metadata {
  min-width: 0;
}
.fixed-row .filename {
  overflow: hidden;
  text-overflow: ellipsis;
}
details {
  margin-top: 16px;
}
summary {
  cursor: pointer;
}
.full-name,
.wrapped {
  overflow-wrap: anywhere;
}
.wrapped {
  padding: 16px;
  background: #e2e2e2;
}
.table-scroll {
  overflow-x: auto;
}
table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  text-align: left;
}
caption {
  text-align: left;
  padding-block: 8px;
}
th,
td {
  padding: 12px;
  border-bottom: 1px solid #aaa;
}

index.html 전체 코드 보기

완성 CSS 전체 코드

style.css 전체 코드 보기

실습 파일과 이어서 읽기

시작 파일·완성 파일·한국어 README 내려받기

일반적인 화면 배치는 Flex와 미디어 쿼리 반응형 기초, 행과 열의 설계는 CSS Grid 상세 가이드에서 이어서 살펴보세요.

공식 참고 문서

이 글이 도움이 되었나요?

조회 중

웹 퍼블리싱 학습 순서

학습 시작 · 첫 글부터 읽기전체 학습 경로

필수 13개 · 전체 15개

읽음 기록 관리

전체 과정 목차 (15개)
  1. 필수 학습 · HTML 입문: 시맨틱 문서와 접근 가능한 폼 만들기
  2. 필수 학습 · CSS 입문: 박스 모델·선택자·캐스케이드 직접 확인하기
  3. 필수 학습 · CSS Flex와 미디어 쿼리 입문: 반응형 카드 페이지 만들기
  4. 필수 학습 · CSS position 완전 이해: relative·absolute·fixed·sticky 실습
  5. 필수 학습 · HTML details와 summary로 접근 가능한 FAQ 만들기
  6. 필수 학습 · CSS Grid 실습: Flex 학습 카드로 열 맞추기와 auto-fit 비교
  7. 필수 학습 · CSS overflow 해결: 긴 텍스트·min-width: 0·말줄임 실습 현재 글
  8. 필수 학습 · HTML 표 만들기: caption·scope로 비교표를 읽기 쉽게, 모바일에서는 표만 스크롤하기
  9. 필수 선수 · HTML CSS 이미지 문제 해결 실습: 경로·비율·잘림·흐림·CLS
  10. 필수 학습 · Container Query 실습: 같은 카드를 본문과 사이드바에 배치하기
  11. 선택 참고 · CSS Baseline 보는 법: 지원 범위와 폴백을 직접 확인하기
  12. 필수 학습 · CSS z-index가 안 먹힐 때: stacking context와 부모 층 디버깅
  13. 필수 선수 · 웹 접근성 기초 점검: 키보드 순서·초점 표시·확대 화면을 직접 확인하는 체크리스트
  14. 필수 학습 · HTML CSS 종합 실습: 소개·카드·이미지·요금표·문의 폼·FAQ가 있는 반응형 서비스 페이지
  15. 선택 참고 · 프론트엔드 SEO 기초: HTML 구조와 이미지 성능 진단하기

새 글 받아보기

RSS 리더에서 BlogFlow의 새 글을 확인할 수 있습니다.

RSS 피드 구독하기

댓글 남기기