안녕하세요! 프론트엔드 개발자 취업 준비생님!
웹 개발을 하다 보면 정말 자주 마주치는 문제 중 하나인 '긴 텍스트가 상자를 뚫고 나가는 현상(Overflow)'을 다루는 문서를 가져오셨군요! 특히 긴 URL이나 띄어쓰기 없는 영단어가 들어왔을 때 레이아웃이 와장창 깨지는 경험, 한 번쯤 해보셨을 텐데요.
이 문서는 그럴 때 텍스트를 어떻게 예쁘게 줄바꿈(wrap)하고 쪼갤(break) 것인지에 대한 완벽한 가이드입니다. 공식 문서의 내용을 하나도 빠짐없이, 실무에서 제가 자주 쓰는 팁까지 얹어서 구어체로 알기 쉽게 번역해 드릴게요!
텍스트 줄바꿈 및 끊기 (Wrapping and breaking text)
이 가이드는 CSS에서 상자를 넘쳐흐르는(overflowing) 텍스트를 관리하는 다양한 방법들을 설명합니다.
이 문서의 목차 (In this article)
- 넘쳐흐르는 텍스트란 무엇인가요? (What is overflowing text?)
- 최소 콘텐츠 크기 찾기 (Finding the min-content size)
- 긴 단어 끊기 (Breaking long words)
- 하이픈 추가하기 (Adding hyphens)
<wbr>요소 (The<wbr>element)- 함께 보기 (See also)
넘쳐흐르는 텍스트란 무엇인가요? (What is overflowing text?)
CSS에서는 매우 긴 단어처럼 띄어쓰기(줄바꿈 할 수 있는 지점)가 없는 문자열이 있을 때, 그 문자열이 들어갈 공간(컨테이너)이 가로(inline) 방향으로 너무 좁다면, 기본적으로 그 공간을 뚫고 넘쳐흐르게(overflow) 됩니다. 아래 예제에서 이런 현상을 바로 확인할 수 있습니다: 아주 긴 단어가 자신이 담긴 박스의 경계선을 뚫고 밖으로 튀어나가고 있죠.
HTML
<div class="box">
Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</div>CSS
.box {
border: 4px solid #f76707;
border-radius: 5px;
padding: 10px;
inline-size: 150px; /* 가로 너비를 150px로 고정했습니다 */
}(실행 결과: 너비가 150px밖에 안 되는 박스 밖으로 웨일스의 아주 긴 지명이 뚫고 나옵니다!)
CSS가 넘치는 콘텐츠를 이렇게 보여주는 이유는, 다른 방식으로 처리하면 '데이터 손실(data loss)'이 발생할 수 있기 때문입니다. CSS에서 데이터 손실이란 여러분의 콘텐츠 일부가 아예 사라져 버리는 것을 의미합니다.
그래서 CSS의 overflow 속성 기본값은 visible(보이게 함)로 설정되어 있고, 덕분에 우리는 박스를 뚫고 나간 텍스트라도 눈으로 볼 수는 있는 겁니다. 비록 지저분해(messy) 보이더라도 아예 안 보이는 것보다는 넘친 걸 볼 수 있는 게 일반적으로 훨씬 낫습니다. 만약 overflow: hidden을 줘서 넘친 부분을 싹둑 잘라버리거나 숨겨버린다면, 나중에 사이트를 미리보기 할 때 콘텐츠가 잘려 나갔다는 사실조차 눈치채지 못할 수 있거든요. 지저분하게 넘치는 건 최소한 눈에 띄기라도 하고, 최악의 경우 모양새가 좀 이상하더라도 방문자가 내용을 읽을 수는 있으니까요.
다음 예제에서는 overflow를 hidden으로 설정했을 때 어떤 일이 벌어지는지 확인할 수 있습니다.
CSS
.box {
border: 4px solid #f76707;
border-radius: 5px;
padding: 10px;
inline-size: 150px;
overflow: hidden; /* 넘치는 부분을 싹둑 잘라냅니다 */
}(실행 결과: 박스를 뚫고 나간 글자들이 완전히 사라져서 읽을 수 없게 됩니다. 심각한 데이터 손실이죠!)
최소 콘텐츠 크기 찾기 (Finding the min-content size)
만약 콘텐츠가 넘치지 않으면서(no overflows) 그 콘텐츠를 딱 맞게 품을 수 있는 상자의 '최소 크기'를 찾고 싶다면, 상자의 width나 inline-size 속성을 min-content로 설정하시면 됩니다.
CSS
.box {
border: 4px solid #f76707;
border-radius: 5px;
padding: 10px;
inline-size: min-content; /* 내용물(가장 긴 단어)의 길이에 맞춰 상자 너비를 유연하게 늘립니다! */
}따라서 넘쳐흐르는 박스를 다룰 때 min-content를 사용하는 것은 아주 좋은 해결책 중 하나입니다. 만약 박스가 자기가 품고 있는 콘텐츠에 맞춰 필요한 최소 크기까지만 알아서 쭉 늘어나는(커지는) 것이 허용되는 디자인이라면, 이 키워드를 써서 딱 맞는 크기를 얻을 수 있습니다.
💡 강사의 실무 팁 1
min-content는 '가장 긴 단어가 깨지지 않고 유지될 수 있는 최소한의 너비'를 말합니다. 버튼이나 뱃지(Badge)를 만들 때 글자 길이에 맞춰 박스 크기가 딱 맞게 늘어나게 하고 싶다면width: max-content;나width: min-content;를 유용하게 쓸 수 있습니다!
긴 단어 끊기 (Breaking long words)
상자의 크기가 무조건 고정되어 있어야 하거나(fixed size), 긴 단어가 절대 박스를 뚫고 나가지 못하게 꽉 잡아두고 싶다면, overflow-wrap 속성이 구세주가 될 수 있습니다. 이 속성은 어떤 단어가 한 줄에 다 들어가기엔 너무 길 때, 단어의 중간을 강제로 끊어버립니다.
CSS
.box {
border: 4px solid #f76707;
border-radius: 5px;
padding: 10px;
inline-size: 150px;
overflow-wrap: break-word; /* 150px을 넘어가면 단어 중간이라도 인정사정없이 줄바꿈 해버립니다! */
}참고 (Note):
overflow-wrap속성은 비표준 속성인word-wrap과 똑같이 작동합니다. 오늘날 브라우저들은word-wrap속성을 표준 속성(overflow-wrap)의 별칭(alias, 같은 기능의 다른 이름)으로 취급합니다.
한번 시도해 볼 만한 대체 속성으로 word-break가 있습니다. 이 속성은 단어가 상자를 넘쳐흐르려고 하는 딱 그 지점(point)에서 무조건 단어를 끊어버립니다. 심지어 그 단어를 그냥 통째로 다음 줄로 넘기면 안 끊어지고 예쁘게 들어갈 수 있는 상황이라도, 지금 당장 줄의 끝에 다다르면 단어 중간을 싹둑 끊어버린다는 특징이 있습니다.
다음 예제에서는 똑같은 문자열에 대해 이 두 속성(word-break와 overflow-wrap)이 어떤 차이를 만들어내는지 비교해 볼 수 있습니다.
HTML
<div class="box box1">A Very LongWordThatHasNoBreakingPossibilities</div>
<div class="box box2">A Very LongWordThatHasNoBreakingPossibilities</div>CSS
.box {
border: 4px solid #f76707;
border-radius: 5px;
padding: 10px;
inline-size: 30ch;
margin-block-end: 1em;
}
.box1 {
word-break: break-all; /* 무자비한 녀석: 줄이 끝나면 다음 줄로 안 넘기고 그 자리에서 그냥 끊어버림 */
}
.box2 {
overflow-wrap: break-word; /* 합리적인 녀석: 긴 단어 덩어리를 통째로 다음 줄로 일단 내린 다음, 거기서도 넘치면 그때 끊음 */
}이런 특성은 문자열이 딱 맞게 들어갈 공간이 부족해서 빈 공간(gap)이 크게 생기는 것을 막고 싶을 때, 혹은 특정 요소 바로 뒤에서 단어가 끊어지는 것을 원치 않을 때 유용할 수 있습니다.
아래 예제에는 체크박스와 라벨(label)이 있습니다. 라벨의 텍스트가 박스에 들어가기엔 너무 길어서 단어를 끊어야 하는 상황이라고 쳐봅시다. 하지만, 여러분은 단어가 체크박스 바로 뒤에서 뚝 끊겨서 다음 줄로 넘어가는 건 시각적으로 피하고 싶을 수 있습니다.
HTML
<div class="field">
<input id="one" type="checkbox" /><label for="one">
LongWordThatHasNoBreakingPossibilities
</label>
</div>
<div class="field field-br">
<input id="two" type="checkbox" /><label for="two">
LongWordThatHasNoBreakingPossibilities
</label>
</div>CSS
.field {
inline-size: 150px;
border: 1px solid #cccccc;
margin-block-end: 1em;
padding: 10px;
}
.field-br {
word-break: break-all;
}💡 강사의 실무 팁 2:
word-breakvsoverflow-wrap완벽 정리
word-break: break-all: 동양권 언어(한국어, 중국어, 일본어)에 주로 쓰입니다. 한국어는 단어 중간에서 줄이 끊어져도 읽는 데 큰 무리가 없기 때문에 텍스트를 박스 끝에 가지런히 맞추기 위해 사용합니다. (영문일 때는 가독성을 크게 해칠 수 있어요!)overflow-wrap: break-word: 영문권에 주로 쓰입니다. 띄어쓰기(어절) 단위를 최대한 보존해주고, 진짜 답이 없을 정도로 긴 URL이나 긴 단어일 때만 쪼갭니다.실무에서는 이 두 개를 조합해서
word-break: keep-all; overflow-wrap: break-word;(한글은 단어 단위로 유지하되, 너무 긴 영어나 URL은 강제로 자르기) 형태를 가장 많이 씁니다!
하이픈 추가하기 (Adding hyphens)
단어가 중간에 끊어질 때 끝에 하이픈(줄표, -)을 추가하고 싶다면, CSS hyphens 속성을 사용하면 됩니다. auto 값을 사용하면, 브라우저가 알아서 자체 규칙에 따라 적절한 하이픈 삽입 위치(hyphenation points)에서 단어를 자동으로 끊고 하이픈을 넣어줍니다.
이 과정을 직접 통제하고 싶다면, manual 값을 사용한 뒤, 문자열 내부에 직접 하드 브레이크 문자(hard break character, U+2010)나 소프트 브레이크 문자(soft break character, U+00AD)를 삽입하세요.
- 하드 브레이크는
‐기호나‐코드를 사용해 추가할 수 있으며, 이 문자가 있는 곳에서는 줄바꿈이 필요 없더라도 무조건 끊고 하이픈을 넣습니다. - 소프트 브레이크는
­,­, 또는­HTML 문자 코드를 사용해 추가할 수 있으며, 이 문자가 있는 곳에서는 줄바꿈이 정말로 필요한 상황일 때만 끊어줍니다.
HTML
<div class="box">
Llanfair­pwllgwyngyll­gogerychwyrndrobwllllantysiliogogogoch
</div>CSS
.box {
inline-size: 150px;
overflow-wrap: break-word;
hyphens: manual; /* 수동으로 ­ 를 넣은 곳에서만 예쁘게 - 기호를 넣으며 끊어줍니다 */
border: 4px solid #f76707;
border-radius: 5px;
padding: 10px;
}또한, hyphenate-character 속성을 사용하면 줄 끝(줄이 끊어지기 전)에 들어가는 해당 언어의 기본 하이픈 기호 대신, 여러분이 원하는 문자열을 커스텀해서 넣을 수도 있습니다. auto 값은 현재 콘텐츠의 언어(lang 속성)의 타이포그래피 관습에 따라 단어 중간 줄바꿈을 표시하기에 가장 올바른 기호를 브라우저가 알아서 선택하게 해줍니다.
CSS는 하이픈에 대한 더 정밀한 제어 기능도 제공합니다: hyphenate-limit-chars 속성을 사용하면 하이픈을 넣을 수 있는 단어의 최소 길이를 지정할 수 있고, 하이픈이 들어가기 전/후에 남겨야 할 최소 문자 개수까지도 설정할 수 있습니다.
<wbr> 요소 (The <wbr> element)
만약 아주 긴 문자열이 있을 때 정확히 어느 지점에서 줄바꿈이 일어났으면 좋겠는지 알고 있다면, HTML의 <wbr> (Word Break Opportunity) 요소를 직접 삽입하는 것도 방법입니다. 이 태그는 웹페이지에 아주 긴 URL 등을 표시해야 할 때 유용하게 쓰일 수 있습니다. 사람들이 읽기 편하도록 의미상 말이 되는 위치(sensible places)에 <wbr>을 추가해 두면 거기서 깔끔하게 줄바꿈이 일어나게 됩니다.
아래 예제에서 텍스트는 <wbr>이 위치한 곳에서 줄바꿈이 일어납니다.
HTML
<div class="box">
Llanfair<wbr />pwllgwyngyll<wbr />gogerychwyrndrobwllllantysiliogogogoch
</div>CSS
.box {
border: 4px solid #f76707;
border-radius: 5px;
padding: 10px;
inline-size: 150px;
}💡 강사의 실무 팁 3:
­와<wbr>의 차이
­: 여기서 끊어지면 끝에 하이픈(-)을 달아달라는 뜻입니다. 영어처럼 단어가 잘렸을 때 하이픈이 꼭 필요한 언어에 씁니다.<wbr>: 하이픈 없이 그냥 여기서 줄바꿈만 허용하겠다는 뜻입니다. URL(예:https://www.naver.com/<wbr>search...)이나 한글 긴 복합명사(서울특별시<wbr>강남구)를 깔끔하게 자를 때 씁니다.
함께 보기 (See also)
- HTML
<wbr>요소 - CSS
word-break속성 - CSS
overflow-wrap속성 - CSS
white-space속성 - CSS
text-wrap속성 - CSS
hyphens속성 - CSS
hyphenate-character속성 - CSS
hyphenate-limit-chars속성 - CSS에서의 오버플로우와 데이터 손실 (Smashing Magazine 기사)
MDN 향상에 도움 주기 (Help improve MDN)
- 이 페이지가 도움이 되셨나요? (Yes / No)
- MDN 기여 방법 알아보기 (Learn how to contribute)
- 마지막 수정일: 2025년 12월 15일 by MDN contributors
- GitHub에서 이 페이지 보기 (View this page on GitHub)
- 이 콘텐츠의 문제점 보고하기 (Report a problem with this content)
어떠신가요? 텍스트가 박스를 뚫고 나가는 골치 아픈 문제를 어떻게 우아하게 해결해야 할지 머릿속에 싹 정리가 되셨나요?
지금 만드시는 포트폴리오 웹 프로필이나 독후감 사이트는 텍스트가 메인이 될 테니, 이 문서의 내용들을 잘 조합해서 모바일 화면에서도 글씨가 예쁘게 떨어지도록 다듬어 보세요. 면접관들에게 "디테일이 살아있는 개발자"라는 찬사를 들을 수 있을 겁니다!
