CSS / Reference / word-wrap

word-wrap는 overflow-wrap의 기존 별칭입니다. 긴 URL이나 공백 없는 문자열이 영역을 넘을 때 필요에 따라 내부 줄바꿈을 허용하며, 새 코드에서는 뜻이 더 명확한 overflow-wrap 이름을 사용하는 편이 좋습니다.

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

.content { overflow-wrap: anywhere; }
.legacy { word-wrap: break-word; }

값과 적용 조건은 MDN overflow-wrap에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 word-wrap-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>word-wrap 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 200px; padding: 10px; border: 1px solid #718096; }
.target { overflow-wrap: anywhere; }
.reference { overflow-wrap: normal; }

/* 좁은 화면에서 실습 외곽을 맞춥니다. */
.target, .reference { overflow-x: auto; }
</style>
</head>
<body>
<main id="demo">
<h1>word-wrap 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">anywhere</p><div class="target">https://example.com/verylongidentifierwithoutspaces123456789</div></div><div class="b"><p class="label">normal</p><div class="reference">https://example.com/verylongidentifierwithoutspaces123456789</div></div></section>
</main>
</body>
</html>

첫 박스는 긴 주소를 영역에 맞춰 나누지만 normal은 정상적인 줄바꿈 기회가 부족하면 넘칠 수 있습니다. 짧은 문장은 두 값이 비슷하게 보입니다.

anywhere와 break-word의 실제 차이

두 값은 고정 너비에서 비슷하게 보일 수 있지만 min-content 크기 계산에서 다릅니다. flex나 grid가 내용의 최소 너비를 이용할 때 anywhere가 레이아웃의 과도한 확장을 줄이는 데 도움이 될 수 있습니다. 컨테이너 자체의 min-width 제한도 함께 확인해야 합니다.

강제 줄바꿈과 비상 줄바꿈 구분

overflow-wrap은 넘침을 피하려는 비상 처리이며 break-all처럼 항상 단어 내부를 적극적으로 나누는 목적과 다릅니다. 텍스트를 자르거나 생략 부호를 넣는 기능도 아니므로 한 줄 말줄임에는 별도 속성이 필요합니다. 선택한 규칙은 실제 긴 링크와 사용자 입력으로 점검하세요.

최소 내용 너비: anywhere와 break-word

다음 전체 문서를 css-reference-10661-practice.html로 UTF-8 저장한 뒤 브라우저에서 엽니다. 다른 예제 파일에 중첩해서 붙이지 않고 별도 파일로 시험합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>최소 내용 너비: anywhere와 break-word</title>
  <style>
    body { margin: 16px; color: #20242b; font: 16px/1.7 sans-serif; }
    main { max-width: 52rem; margin: auto; }
    h1 { font-size: 1.35rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .samples > * { max-width: 100%; min-width: 0; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
.scroll {overflow-x:auto;max-width:100%;} .sample {width:min-content;max-width:none;border:2px solid #006c9c;font-family:monospace;margin-bottom:16px;} .anywhere {overflow-wrap:anywhere;} .break {overflow-wrap:break-word;}
  </style>
</head>
<body>
<main>
  <h1>최소 내용 너비: anywhere와 break-word</h1>
<div class="scroll"><p>anywhere</p><div class="sample anywhere">https://example.com/averylongunbrokenresourceidentifier</div><p>break-word</p><div class="sample break">https://example.com/averylongunbrokenresourceidentifier</div></div>
</main>
</body>
</html>

같은 문자열에서도 anywhere는 새 줄바꿈 기회를 min-content 계산에 반영하여 좁아지고, break-word는 같은 방식으로 반영하지 않습니다. 두 번째 박스의 긴 너비는 내부 스크롤로 확인합니다. .break만 anywhere로 바꾸어 두 너비가 같아지는지 보고 복구하세요. Flex/Grid의 자동 최소 크기도 이 차이에 영향을 받을 수 있어 min-width:0이 필요한지 별도로 판단합니다.

내용이 넘치는 원인과 스크롤 영역을 함께 살펴보려면 넘치는 콘텐츠와 긴 문자열 처리하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 word-break, white-space입니다.

적용되지 않거나 예상과 다를 때

• nowrap을 해제했는지와 요소에 실제 너비 제한이 있는지 확인합니다.
• flex 자식이 넘치면 overflow-wrap만 바꾸기 전에 min-width: 0 적용이 필요한지 확인합니다.