AAtomic CSS

overflow-wrap

긴 단어가 컨테이너를 넘칠 때 줄바꿈 여부를 제어합니다. owbw는 사용자 입력 콘텐츠에서 오버플로를 방지하는 안전한 선택입니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
ownoverflow-wrap: normal자연스러운 줄바꿈 포인트에서만 줄바꿈 (기본값)
owbwoverflow-wrap: break-word넘침 방지를 위해 단어 중간에서도 줄바꿈
owaoverflow-wrap: anywherebreak-word와 유사하지만 min-content 계산에 반영

시각적 비교

좁은 컨테이너 안에 긴 단어를 넣어 각 값의 차이를 비교합니다.

Normal — own

This container has a Superlongwordthatdoesnotcontainanybreakpoints and it might overflow.

긴 단어가 컨테이너를 넘침

Break Word — owbw

This container has a Superlongwordthatdoesnotcontainanybreakpoints and it might overflow.

넘치는 단어만 중간에서 줄바꿈

Anywhere — owa

This container has a Superlongwordthatdoesnotcontainanybreakpoints and it might overflow.

break-word와 비슷하지만 min-content에 영향

owbw vs wbba — 차이점

owbw(overflow-wrap: break-word)와 wbba(word-break: break-all)는 비슷하지만 동작이 다릅니다.

owbw (overflow-wrap)wbba (word-break)
줄바꿈 시점Breaks mid-word only when overflowingCan break all words at character level
정상 단어Breaks at natural positionsMay break at character level
가독성High (preserves words)Low (all words may break)
권장 용도User content, text with URLsCJK mixed text, narrow columns

클래스별 상세

ownoverflow-wrap: normal

기본값입니다. 단어의 자연스러운 줄바꿈 포인트(공백, 하이픈)에서만 줄바꿈합니다. 긴 단어는 컨테이너를 넘칠 수 있습니다.

<!-- Default: long words may overflow -->
<div class="own w20rem">
  https://verylongdomainname.example.com/path/to/resource
</div>

owbwoverflow-wrap: break-word

단어가 컨테이너를 넘칠 경우에만 단어 중간에서 줄바꿈합니다. 정상적인 단어는 자연스러운 위치에서 줄바꿈되므로 가독성이 유지됩니다. 사용자 입력 콘텐츠에 권장합니다.

<!-- Applied to user content -->
<div class="owbw w20rem">
  https://verylongdomainname.example.com/path/to/resource
</div>

<!-- Comment area -->
<div class="owbw p16px bg18181B br8px">
  Even if user-entered text contains long URLs or
  continuous characters, it remains safe.
</div>

owaoverflow-wrap: anywhere

owbw와 비슷하지만, 줄바꿈 포인트가 min-content 계산에도 반영됩니다. flex/grid 레이아웃에서 요소가 줄어들 수 있게 합니다.

<!-- Can shrink in flex context -->
<div class="df gap16px">
  <div class="owa fg1 fb0">
    Superlongwordthatmightoverflow
    can also shrink in flex items
  </div>
  <div class="fg1 fb0">Side area</div>
</div>

팁 & 주의사항

사용자 콘텐츠에는 owbw

URL이나 긴 단어가 포함될 수 있는 사용자 입력 영역에는 owbw를 기본으로 적용하세요. 레이아웃 깨짐을 방지합니다.

hyphens와 조합

owbw hya를 함께 사용하면 단어가 잘릴 때 하이픈(-)이 자동으로 추가되어 가독성이 향상됩니다.

word-breakwhite-spacehyphens