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

긴 제목과 URL이 Flex·Grid 화면을 밀어내면 어떻게 해결하나요?

긴 제목·URL이 화면을 밀어내면 최소 너비와 줄바꿈을 확인합니다. Flex 항목에는 min-width: 0, Grid 열에는 minmax(0, 1fr)을 검토하고 줄바꿈·말줄임을 목적에 맞게 고릅니다.

적용 조건·범위: 긴 콘텐츠가 있으면 track 최소 크기에 끌려갈 수 있습니다. 필요한 경우 minmax(0, 1fr)를 사용합니다.

공식 문서 참고: MDN: Flex·Grid 항목의 자동 최소 너비 · MDN: 긴 URL과 단어의 overflow-wrap:anywhere · MDN: text-overflow 말줄임과 함께 필요한 속성

독립 실습: 직접 만들고 확인하기

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

좁은 폭에서 긴 작업 제목과 URL의 줄바꿈·말줄임을 확인하세요.

.overflow-card { display: flex; gap: 12px; max-width: 100%; padding: 16px; border: 1px solid #777; }
.overflow-card__body { min-width: 0; flex: 1; }
.overflow-card__body h2, .overflow-card__body p { overflow-wrap: anywhere; }
.overflow-card a { flex: none; }

직접 실행: 환경 준비와 전체 파일

독자 질문

긴 작업 제목과 URL이 카드 밖으로 밀릴 때 어떤 요소의 최소 너비를 바꿔야 할까요?

직접 만들 화면

작은 화면에서도 제목과 URL이 카드 내부에 남고 문의 링크가 밀리지 않는 작업 카드

새 폴더에 index.html과 style.css를 만들고 아래 전체 파일을 각각 저장하세요. 브라우저에서 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>
<article class="overflow-card">
  <div class="overflow-card__body">
    <h2>아주아주긴작업제목이줄바꿈되지않을때</h2>
    <p>https://example.com/tasks/very-long-unbroken-address-123456789</p>
  </div>
  <a href="#contact">문의</a>
</article><section id="contact"><h2>문의 안내</h2><p>이 실습의 링크 이동 대상입니다.</p></section>
</body>
</html>

확인할 결과와 실제 검증 상태

320px에서 링크가 화면 밖으로 밀리지 않고 긴 문자열이 줄바꿈되어야 합니다. .overflow-card__body의 min-width: 0을 잠시 지워 결과를 비교하세요. 이 예제의 overflow-wrap: anywhere는 최소 콘텐츠 너비 계산에도 줄바꿈 기회를 반영하므로 그것만 지워서는 넘침이 재현되지 않을 수 있습니다. 제목과 URL의 overflow-wrap을 break-word로 바꾼 상태에서 min-width: 0을 끄고 켜며 차이를 관찰하고, 마지막에는 두 규칙을 원래대로 복구합니다. 본문 전체에 overflow-x: hidden을 넣어 가리지 마세요.

실제 브라우저·DevTools 조작 결과: 미확인. 위 내용은 코드에서 예상되는 결과와 독자가 수행할 확인 절차입니다.

다음 학습 연결

08회차에서는 페이지 전체 대신 데이터 표 영역에만 가로 스크롤을 적용합니다.

긴 문자열 재현

<div class="row">
  <span class="label">
    https://example.com/this-is-a-very-long-string-without-normal-break-points
  </span>
  <button>삭제</button>
</div>

.row {
  display: flex;
  gap: 12px;
  width: 320px;
}

텍스트가 줄어들지 않으면 row 밖으로 밀어낼 수 있습니다.

min-width:auto 문제

Flex item은 기본적으로 content 기반 최소 너비를 가질 수 있습니다.

텍스트 영역이 남은 공간 안에서 줄어들 수 있도록:

.label {
  min-width: 0;
}

를 적용합니다.

overflow-wrap:anywhere

공백이 없는 URL이나 긴 문자열도 필요한 위치에서 줄바꿈할 수 있습니다.

.label {
  min-width: 0;
  overflow-wrap: anywhere;
}

일반 문장은 공백에서 자연스럽게 줄바꿈되지만 긴 URL에는 특히 유용합니다.

개념 설명용 일러스트. 내용을 모두 보여줘야 하면 줄바꿈을 적용하고, 한 줄 요약이 필요한 경우에만 말줄임을 사용합니다. 이미지 원본 열기

한 줄 말줄임

한 줄로 제한해야 하는 UI라면 다음 조건이 필요합니다.

.label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

모든 텍스트에 ellipsis를 적용하지 않습니다.

사용자가 전체 내용을 읽어야 한다면 줄바꿈이 더 적절합니다.

Grid에서 overflow

다음 Grid는 1fr track의 최소 크기가 콘텐츠에 끌려갈 수 있습니다.

.layout {
  display: grid;
  grid-template-columns:
    200px 1fr;
}

더 안전한 구조:

.layout {
  display: grid;
  grid-template-columns:
    200px minmax(0, 1fr);
}

content column이 실제 available width 안에서 줄어들 수 있습니다.

body overflow-x:hidden의 문제

body {
  overflow-x: hidden;
}

가로 스크롤 원인을 숨길 수 있습니다.

이미지, fixed 요소, 긴 텍스트, width 계산 문제를 먼저 찾습니다.

DevTools 진단

Elements에서 의심 요소를 선택하고 Computed에서 width/min-width를 확인합니다.

임시로 outline을 줄 수도 있습니다.

* {
  outline: 1px solid rgba(255, 0, 0, 0.15);
}

디버깅 후 반드시 제거합니다.

자주 발생하는 오류와 해결

body에 overflow-x:hidden부터 넣습니다

원인을 숨길 뿐 콘텐츠가 잘릴 수 있습니다. 먼저 실제로 폭을 밀어내는 요소를 DevTools에서 찾습니다.

grow/flex:1을 넣었는데도 텍스트가 줄지 않습니다

Flex item의 기본 최소 너비가 원인일 수 있습니다. 텍스트 영역에 min-width: 0을 확인합니다.

Grid의 1fr이 알아서 줄어들 것이라 생각합니다

긴 콘텐츠가 있으면 track 최소 크기에 끌려갈 수 있습니다. 필요한 경우 minmax(0, 1fr)를 사용합니다.

모든 긴 텍스트를 ellipsis로 숨깁니다

전체 내용을 읽어야 하는 정보라면 overflow-wrap: anywhere로 줄바꿈하는 편이 더 적절합니다.

학습 완료 체크리스트

overflow 원인을 숨기지 않고 찾을 수 있습니다.
Flex item에 min-width:0가 필요한 상황을 이해했습니다.
Grid에 minmax(0,1fr)를 적용할 수 있습니다.
긴 URL에 overflow-wrap:anywhere를 사용할 수 있습니다.
말줄임과 줄바꿈을 목적에 따라 선택할 수 있습니다.

독립 실습은 여기서 마칠 수 있습니다. 아래 선택 실습은 TaskFlow 프로젝트 파일로 진행합니다.

선택 실습: 할 일 앱에 적용하기

TaskFlow는 간단한 서비스 화면에서 시작해 할 일 앱으로 이어 만드는 예제입니다. 이 선택 실습에서는 HTML과 CSS로 이번 화면을 만듭니다.

TaskFlow 카드에 긴 제목·URL을 넣어 overflow를 재현하고 수정합니다.

선택: 연재 프로젝트와 전체 자료

연재 프로젝트를 이어 만드는 분을 위한 자료입니다. 이 글의 개념과 예제만 찾으셨다면 필요한 파일과 실행 방법만 펼쳐보세요.

TaskFlow 프로젝트 적용

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

TaskFlow 누적 7단계입니다. 좁은 폭에서 긴 작업 제목과 URL의 줄바꿈·말줄임을 확인하세요.

예제 크게 보기 (새 탭)

실행 가능한 시작본과 이번 단계

이번 단계 시작 ZIP을 새 폴더에 압축 해제합니다. 이 ZIP은 직전 단계의 완료 파일과 같으며 앞 글의 코드를 따로 모을 필요가 없습니다. 이번 단계 완료 ZIP은 다른 폴더에 풀어 비교합니다.

기능 Grid에 긴 URL이 있는 미리보기 카드를 추가하고 실제 flex item에 min-width:0·줄바꿈 규칙을 적용합니다.

index.html: 이 파일의 기존 내용을 아래 완료 파일 전체와 대조하여 교체합니다. 다른 파일은 유지합니다.
style.css: 이 파일의 기존 내용을 아래 완료 파일 전체와 대조하여 교체합니다. 다른 파일은 유지합니다.

짧은 코드 예제는 변경 위치를 설명합니다. 파일 전체를 작성하거나 교체할 때는 완료 파일 전체를 사용하세요. 생략 표시가 있는 부분 코드를 파일 전체로 저장하지 않습니다.

실행: ZIP의 index.html을 브라우저에서 엽니다. 외부 서버나 npm 설치 없이 로컬 HTML·CSS·이미지를 사용합니다. 문의 폼은 서버 전송을 연결하지 않은 문서 예제입니다. 연습 값만 사용하고 입력 형식을 확인합니다.

직접 확인할 결과: 페이지 전체 overflow를 숨기지 않아도 긴 URL은 카드 안에서 줄바꿈하도록 정의됩니다.

전체 파일·코드 보기

완료 파일 전체

index.html 전체 파일

<!DOCTYPE html>
<html lang="ko">
 <head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title>
   TaskFlow
  </title>
  <link href="./style.css" rel="stylesheet"/>
 </head>
 <body>
  <header class="site-header">
   <div class="page site-header__inner">
    <a class="brand" href="#home">
     TaskFlow
    </a>
    <nav aria-label="주요 메뉴" class="nav">
     <a href="#features">
      기능
     </a>
     <a href="#contact">
      문의
     </a>
    </nav>
   </div>
  </header>
  <main class="page" id="home">
   <section>
    <h1>
     해야 할 일을 한눈에 정리하세요
    </h1>
    <p>
     TaskFlow는 오늘의 작업을 빠르게 정리하는 서비스입니다.
    </p>
   </section>
   <section id="features">
    <h2>
     주요 기능
    </h2>
    <div class="feature-grid">
     <article class="card feature-card">
      <span class="feature-card__badge">
       NEW
      </span>
      <h3>
       빠른 작업 추가
      </h3>
      <p>
       해야 할 일을 바로 기록할 수 있습니다.
      </p>
     </article>
     <article class="card">
      <h3>
       간단한 분류
      </h3>
      <p>
       해야 할 일을 구분합니다.
      </p>
     </article>
     <article class="card">
      <h3>
       진행 확인
      </h3>
      <p>
       완료 여부를 확인합니다.
      </p>
     </article>
     <article class="card task-preview">
      <div class="task-preview__content">
       <h3>
        아주 긴 작업 제목과 URL
       </h3>
       <p>
        https://example.com/very-long-task-url-without-normal-break-points-123456789
       </p>
      </div>
      <a href="#contact">
       문의
      </a>
     </article>
    </div>
   </section>
   <section class="faq" id="faq">
    <h2>
     자주 묻는 질문
    </h2>
    <details>
     <summary>
      TaskFlow는 어떤 서비스인가요?
     </summary>
     <p>
      해야 할 일을 빠르게 정리하는 작업 관리 서비스 예제입니다.
     </p>
    </details>
    <details>
     <summary>
      모바일에서도 볼 수 있나요?
     </summary>
     <p>
      작은 화면부터 설계한 반응형 레이아웃을 사용합니다.
     </p>
    </details>
    <details>
     <summary>
      문의는 어디서 하나요?
     </summary>
     <p>
      아래 문의 폼을 이용할 수 있습니다.
     </p>
    </details>
   </section>
   <section id="pricing">
    <h2>
     요금제
    </h2>
    <div class="pricing-grid">
     <article class="card">
      <h3>
       Basic
      </h3>
      <p>
       개인 학습용
      </p>
     </article>
     <article class="card">
      <h3>
       Pro
      </h3>
      <p>
       더 많은 프로젝트
      </p>
     </article>
    </div>
   </section>
   <section id="contact">
    <h2>
     문의하기
    </h2>
    <form>
     <div class="form-field">
      <label for="name">
       이름
      </label>
      <input autocomplete="name" id="name" name="name" type="text"/>
     </div>
     <div class="form-field">
      <label for="email">
       이메일
      </label>
      <input autocomplete="email" id="email" name="email" type="email"/>
     </div>
     <div class="form-field">
      <label for="message">
       문의 내용
      </label>
      <textarea id="message" name="message" rows="5"></textarea>
     </div>
     <button type="submit">
      문의 보내기
     </button>
    </form>
   </section>
  </main>
  <footer class="site-footer">
   <div class="page">
    <p>
     © TaskFlow
    </p>
   </div>
  </footer>
  <a class="help-button" href="#contact">
   문의
  </a>
 </body>
</html>

style.css 전체 파일

:root {
  color: #171717;
  background: #f5f5f5;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}


body {
  margin: 0;
  font-family:
    Arial,
    sans-serif;
  line-height: 1.6;
  color: #171717;
  background: #f5f5f5;
}


.page {
  width: min(
    100% - 32px,
    960px
  );
  margin-inline: auto;
}


.site-header,
.site-footer {
  padding-block: 20px;
}


main {
  padding-block: 48px;
}


section + section {
  margin-top: 64px;
}


.card {
  padding: 24px;
  border: 1px solid #d7d7d7;
  background: #fff;
}


form {
  display: grid;
  gap: 16px;
}


.form-field {
  display: grid;
  gap: 8px;
}


input,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #b8b8b8;
  background: #fff;
}


button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #171717;
  background: #171717;
  color: #fff;
}

a { color: inherit; }
input, textarea, button { font: inherit; }
h1 { font-size: 32px; font-weight: 700; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }

.site-header__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}


.feature-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


@media (min-width: 48rem) {
  .site-header__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }


  .feature-list {
    flex-direction: row;
  }


  .feature-list > * {
    flex: 1;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f5f5f5;
  border: 1px solid #ddd;
}


.feature-card {
  position: relative;
}


.feature-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border: 1px solid #171717;
  background: #fff;
  font-size: 12px;
}


.help-button {
  position: fixed;
  right: 16px;
  bottom: 16px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #171717;
  background: #171717;
  color: #fff;
  text-decoration: none;
}

.faq {
  display: grid;
  gap: 12px;
}


.faq details {
  border: 1px solid #d7d7d7;
  background: #fff;
}


.faq summary {
  padding: 16px;
  cursor: pointer;
  font-weight: 700;
}


.faq details p {
  margin: 0;
  padding: 0 16px 16px;
}


.faq summary:focus-visible {
  outline: 2px solid #171717;
  outline-offset: 2px;
}

.feature-grid,
.pricing-grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(100%, 220px),
        1fr
      )
    );
  gap: 16px;
}

.task-preview {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}


.task-preview__content {
  min-width: 0;
  flex: 1;
}


.task-preview__content p {
  overflow-wrap: anywhere;
}

.settings-layout {
  display: grid;
  grid-template-columns:
    180px
    minmax(0, 1fr);
  gap: 24px;
}

위 파일과 ZIP의 동명 파일은 동일합니다. 회차별 README·CHANGES 문서는 ZIP에 포함합니다. 생성 산출물·node_modules·실제 환경 변수 파일은 포함하지 않습니다.

index.html 테스트 데이터

<article class="card task-preview">
  <div class="task-preview__content">
    <h3>
      아주 긴 작업 제목과 URL
    </h3>
    <p>
      https://example.com/very-long-task-url-without-normal-break-points-123456789
    </p>
  </div>


  <a href="#contact">
    문의
  </a>
</article>

style.css

.task-preview {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}


.task-preview__content {
  min-width: 0;
  flex: 1;
}


.task-preview__content p {
  overflow-wrap: anywhere;
}

설정 페이지 같은 2열 Grid 예시:

.settings-layout {
  display: grid;
  grid-template-columns:
    180px
    minmax(0, 1fr);
  gap: 24px;
}

시작본과 이번 변경

CSS Grid 실습: Flex 학습 카드로 열 맞추기와 auto-fit 비교의 완료 체크포인트를 시작본으로 사용합니다.

index.html의 카드에 긴 제목과 URL을 테스트 데이터로 넣고 style.css의 실제 flex item에 min-width:0을 적용합니다. 텍스트 줄바꿈을 추가하고 페이지를 숨기지 않은 상태로 320~360px 결과를 확인합니다.

연속 프로젝트 선수 조건

Flexbox와 Grid의 기본 동작을 알고 있어야 합니다.
DevTools에서 요소 width/min-width를 확인할 수 있으면 좋습니다.

이전 체크포인트

publishing-step-06-grid

이번 목표

TaskFlow 카드에 긴 제목·URL을 넣어 overflow를 재현하고 수정합니다.

실행 확인

320~360px viewport에서 페이지 전체 가로 스크롤이 생기지 않는가
긴 URL이 카드 안에서 줄바꿈되는가
link/button이 화면 밖으로 밀리지 않는가
body overflow-x:hidden을 사용하지 않았는가

완료 체크포인트

publishing-step-07-overflow

다음 학습

다음 글에서는 요금제 비교 데이터를 table로 표현하고 모바일에서는 표 wrapper만 가로 스크롤되도록 만듭니다.

글 소개·학습 준비·전체 목차

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

웹 퍼블리싱 · 7 / 15 · 오류 해결 · CSS overflow

레이아웃이 가로로 튀어나올 때 overflow-x: hidden을 body에 추가하면 당장은 스크롤바가 사라집니다.

하지만 실제 원인은 그대로 남아 있고 콘텐츠가 잘릴 수 있습니다.

이번 글에서는 긴 URL·긴 단어·Flex/Grid item의 최소 크기 때문에 발생하는 overflow를 재현하고 min-width: 0, minmax(0, 1fr), overflow-wrap, text-overflow를 목적에 맞게 적용합니다.

이번 글에서 배우는 내용

overflow가 발생하는 이유
Flex item의 min-width:auto
min-width:0
Grid의 minmax(0,1fr)
overflow-wrap:anywhere
white-space와 text-overflow
전체 페이지 overflow를 숨기지 않는 이유

먼저 알아야 할 내용

Flex/Grid와 min-width·overflow의 기본 의미를 알면 됩니다. 긴 문자열이 담긴 단독 카드로 재현합니다.

읽음 기록

읽음 — / 전체 15개 · 필수 13개

이 글을 쓴 해비

웹사이트를 제작·운영하고, 개인 서비스와 자동화·AI 도구를 만듭니다. 직접 만들며 배운 내용과 문제 해결 과정을 BlogFlow에 기록합니다.

새 글 받아보기

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

RSS 피드 구독하기