word-break

CSS Reference

word-break는 단어 내부의 줄바꿈 규칙을 정합니다. 한글·중국어·일본어에서 단어 중간 줄바꿈을 줄이려면 keep-all을 검토하고, 긴 영문을 글자 단위로 자르려면 break-all을 사용할 수 있지만 읽기 흐름이 크게 달라집니다.

문법과 주요 값

속성	초기값	상속	주요 적용 조건
`word-break`	normal	예	모든 요소; 실제 그림·텍스트·상자의 존재 조건은 본문에서 확인

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

.copy { word-break: keep-all; overflow-wrap: anywhere; }
.identifier { word-break: break-all; }

값 또는 구분	동작과 선택 기준
`normal`	언어의 기본 줄바꿈 규칙
`keep-all`	CJK 문자 사이의 줄바꿈을 제한; 공백 등은 여전히 줄바꿈 지점
`break-all`	단어 내부를 적극적으로 잘라 배치
`break-word`	기존 호환 값; 새 코드에서는 overflow-wrap와 역할을 구분

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

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 word-break-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-break 비교 예제</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; }
.samples { gap: 180px; }
.target, .reference { width: 190px; padding: 10px; border: 1px solid #718096; }
.target { word-break: keep-all; }
.reference { word-break: break-all; }

/* 좁은 화면에서 실습 외곽을 맞춥니다. */
.target, .reference { overflow-x: auto; }
</style>
</head>
<body>
<main id="demo">
<h1>word-break 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">keep-all</p><div class="target">한글단어줄바꿈을비교합니다 Supercalifragilisticexpialidocious</div></div><div class="b"><p class="label">break-all</p><div class="reference">한글단어줄바꿈을비교합니다 Supercalifragilisticexpialidocious</div></div></section>
</main>
</body>
</html>

keep-all은 한글을 포함한 긴 덩어리가 영역을 넘을 수 있고 break-all은 단어 내부까지 잘라 넣습니다. 긴 식별자 하나만 비상 처리하려는 목적에는 overflow-wrap가 더 적합할 수 있습니다.

문장 언어와 예외 처리

keep-all은 모든 줄바꿈을 금지하는 nowrap과 다릅니다. 공백과 다른 정상적인 기회에서는 줄이 바뀌지만 공백 없는 긴 단어는 넘칠 수 있습니다. 한글 본문에 keep-all을 쓰면서 긴 URL을 허용한다면 overflow-wrap: anywhere 같은 비상 규칙을 함께 검토합니다.

break-all을 전역으로 강제하지 않기

break-all은 영어 단어가 읽기 어려운 위치에서 잘릴 수 있습니다. 좁은 숫자 코드 영역처럼 목적이 분명한 곳에 한정하고, 원문 문장이나 링크를 넣어 비교하세요. 하이픈 처리에는 hyphens와 문서의 lang 같은 별도의 조건이 관여합니다.

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

기존 같은 예문으로 .target의 word-break만 normal, keep-all, break-all로 바꾸어 한국어와 영문 줄바꿈을 비교합니다. 문서의 lang은 실제 주 언어와 맞춥니다.
break-word는 사용 중단이 권고되는 호환 값입니다. word-break:break-word와 overflow-wrap:break-word는 이름이 비슷해도 같은 최소 너비 동작이 아니므로 새 코드는 overflow-wrap의 목적에 맞는 값을 검토하고 원래 예제로 복구합니다.

normal 기준에서도 먼저 비교하고, 같은 예문을 https://example.com/longunbrokensegment로 잠시 바꾸어 URL 안의 기회도 관찰합니다. 마지막에 원래 한국어·영문 문자열과 keep-all/break-all을 복구합니다. URL, 한글, 중국어·일본어(CJK)를 모든 언어의 동일한 규칙으로 일반화하지 않습니다.

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

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

white-space: nowrap이 감싸기를 막고 있지 않은지 확인합니다.
문서 언어와 실제 한글·영문·URL 예문을 모두 넣어 확인합니다.

CSS Reference

CSS / Reference / background-repeat

repeat·no-repeat·space·round를 같은 타일로 비교합니다. 반복 방향, 타일 간격과 크기 조정, 한 축에 한 타일만 들어가는 조건을 살펴봅니다.

CSS / Reference / list-style-position

목록 마커를 항목 안·밖에 배치하고 여러 줄 시작점을 비교합니다. 첫 블록 자식과 시작 여백, 잘리는 마커를 확인하는 기준을 설명합니다.

CSS / Reference / text-decoration

텍스트 장식의 선·색·모양과 부모에서 이어지는 장식을 설명합니다. 자식의 none이 부모 밑줄을 없애지 못하는 경우를 같은 조건에서 비교합니다.

CSS / Reference / content

가상 요소에 문자열·속성값·장식 도형을 생성하는 방법을 설명합니다. 빈 문자열과 none의 차이를 실습하고 중요한 정보를 HTML에 남기는 기준을 확인합니다.

CSS / Reference / aspect-ratio

선호 가로세로 비율과 이미지의 고유 비율을 구분합니다. auto 조합, 확정 크기, cover·contain의 잘림과 빈 공간을 실행 예제로 비교합니다.

CSS / Reference / background-position

배경 위치의 백분율이 영역과 이미지 크기의 차이에 적용되는 이유를 설명합니다. 동일 영역에서 0·50·100%를 비교하고 위치와 잘림을 조정합니다.

CSS / Reference / box-shadow

박스 그림자의 위치·흐림·확산·겹침 순서를 조정합니다. 한 값씩 바꾸는 실습으로 그림자가 레이아웃 크기와 상위 잘림에 미치는 관계를 확인합니다.

CSS / Reference / calc()

calc()로 백분율과 길이를 조합하고 실제 부모 너비를 기준으로 결과를 확인합니다. 자료형 오류, 새 형식 산술과 무한대 계산의 차이도 구분합니다.

CSS / Reference / background-attachment

요소 내부와 페이지 스크롤을 나누어 local·scroll·fixed의 기준을 비교합니다. 별도 실행 예제와 모바일에서 확인해야 할 조건을 제공합니다.

CSS / Reference / font-style

italic·oblique의 요청과 실제 글꼴 선택을 구분합니다. 서체 파일, 합성 기울임, 의미 있는 강조와 font 단축 속성의 영향을 확인합니다.