CSS / Reference / word-break
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 / accent-color
체크박스·라디오·범위·진행률의 기본 강조색을 지정합니다. 레이블과 키보드 조작, disabled·appearance 및 운영체제별 차이를 확인합니다.
텍스트 그림자의 위치·흐림·레이어 순서를 조정합니다. 박스 그림자와의 차이, 잘림 및 실제 글자 대비를 함께 점검합니다.
박스 그림자의 위치·흐림·확산·겹침 순서를 조정합니다. 한 값씩 바꾸는 실습으로 그림자가 레이아웃 크기와 상위 잘림에 미치는 관계를 확인합니다.
CSS / Reference / letter-spacing, word-spacing
같은 문장을 기준으로 문자 간격과 단어 간격을 따로 조정합니다. normal 기준, 상대 단위, 언어별 줄바꿈과 과도한 음수 간격의 문제를 설명합니다.
CSS / Reference / background-size
cover·contain을 같은 이미지와 영역에서 비교합니다. 비율 유지, 잘림, 빈 공간과 padding-box 기준의 크기 계산을 함께 확인합니다.
CSS / Reference / align-content
Flex 줄 묶음과 Grid 트랙의 공간 배분을 비교합니다. nowrap·wrap, auto 트랙 stretch와 일반 블록의 적용 조건을 별도 실습으로 확인합니다.
사용 중단된 clip의 좌표를 읽고 clip-path의 inset 거리와 비교합니다. 절대 위치 조건과 크기 변경 시 좌표 재계산을 설명합니다.
실제 탭 문자의 정지 간격을 조절하고 공백 네 개와 구분합니다. 공백 보존 조건과 같은 문자열에서 4·8의 결과를 확인합니다.
CSS / Reference / border-style
테두리 스타일의 1~4개 값 대응과 none의 계산 두께를 설명합니다. 접힌 표에서 hidden이 이웃 경계를 억제하는 차이도 실행 예제로 확인합니다.