Korean line breaking (keep-all)

한국어 줄바꿈 (keep-all)

Korean text wraps at any syllable by default. `word-break: keep-all` restricts breaks to spaces — word (어절) boundaries — instead.

Also known as: 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}}

English has spaces between words, so line breaks naturally fall at word boundaries. Korean syllables within a word (어절 — a space-delimited unit) run together with no internal spaces, and the browser default (`word-break: normal`) breaks anywhere between them. In a narrow container, a single particle like "을" can get pushed to its own line, breaking the phrase "디자인 시스템을" into "디자인 시스템\n을" and disrupting the reading rhythm.

`word-break: keep-all` restricts line breaks in CJK text to points where a space exists — word boundaries — carrying an entire 어절 to the next line the way English carries whole words. Lines may end up somewhat longer or shorter as a result, but a lone trailing particle like "을" or "는" never gets stranded.

In the extreme case where a container is too narrow to fit even one 어절, `keep-all` alone can cause overflow, so pairing it with `overflow-wrap: break-word` is the safer combination. In documents mixing English and Korean — technical blogs, code documentation — `keep-all` also has the side benefit of not breaking English words mid-word.

When to use

A reasonable default for most Korean body text. For very narrow spaces — badges, tags — where a single 어절 might not fit, pair it with `overflow-wrap: break-word`.