디자인 아틀라스
EN
Aa 타이포그래피

한국어 줄바꿈 (keep-all)

Korean line breaking (keep-all)

한글 텍스트의 기본 줄바꿈은 음절 단위입니다 — 아무 글자 뒤에서나 끊깁니다. `word-break: keep-all`은 공백이 있는 지점(어절 경계)에서만 끊기게 합니다.

다른 이름: word-break: keep-all어절 단위 줄바꿈
···
html
<div class="stage">
  <div class="col">
    <div class="tag">word-break: normal</div>
    <p class="box normalwrap">디자인 시스템을 만들 때는 타이포그래피 토큰부터 정리하는 편이 낫습니다</p>
  </div>
  <div class="col">
    <div class="tag good">word-break: keep-all</div>
    <p class="box keepall">디자인 시스템을 만들 때는 타이포그래피 토큰부터 정리하는 편이 낫습니다</p>
  </div>
</div>
css
.stage{display:flex;gap:22px;align-items:flex-start;justify-content:center;flex-wrap:wrap;width:100%;padding:0 8px}
.col{display:grid;gap:8px;max-width:180px}
.tag{font:10px ui-monospace,Menlo,monospace;color:var(--accent-2)}
.tag.good{color:var(--accent-3)}
.box{font-size:13px;line-height:1.65;font-family:-apple-system,system-ui,"Apple SD Gothic Neo",sans-serif;color:var(--fg);margin:0;
  border-left:3px solid var(--line);padding-left:10px;animation:resize 5s ease-in-out infinite}
.normalwrap{word-break:normal;border-left-color:var(--accent-2)}
.keepall{word-break:keep-all;border-left-color:var(--accent-3)}
@keyframes resize{0%,100%{width:130px}50%{width:165px}}

영어는 단어 사이에 공백이 있어서 줄바꿈이 자연스럽게 단어 경계에서 일어납니다. 한글은 어절(띄어쓰기 단위) 안에서도 음절이 죽 이어지는데, 브라우저 기본값(`word-break: normal`)은 이 음절들 사이 아무 데서나 줄을 끊습니다. 좁은 컨테이너에서 "디자인 시스템을" 같은 어절이 "디자인 시스템\n을"처럼 조사 하나만 다음 줄로 밀려나면 뜻을 파악하는 리듬이 끊깁니다.

`word-break: keep-all`은 한글·한자·가나 같은 CJK 텍스트의 줄바꿈을 공백이 있는 지점(어절 경계)으로 제한합니다 — 영어 단어처럼 어절을 통째로 다음 줄로 넘깁니다. 그 결과 한 줄이 다소 길어지거나 짧아질 수 있지만, "을", "는" 같은 조사 하나만 외로이 떨어지는 일이 없어집니다.

컨테이너가 매우 좁아 한 어절도 못 들어가는 극단적인 상황에서는 `keep-all`이 오히려 텍스트가 넘치게 만들 수 있어, `overflow-wrap: break-word`를 함께 주는 것이 안전한 조합입니다. 영어와 한글이 섞인 문서(코드 문서, 기술 블로그)에서는 특히 `keep-all`이 효과가 커서, 영단어가 중간에서 잘리는 것도 함께 막아줍니다.

언제 쓰나

한글 본문 대부분에 기본값으로 켜두는 걸 추천합니다. 아주 좁은 배지·태그처럼 어절 하나가 들어갈 공간도 없는 곳엔 `overflow-wrap: break-word`를 함께 쓰세요.