AAtomic CSS

overflow-wrap

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

클래스 목록

클래스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)
줄바꿈 시점넘칠 때만 단어 중간에서 줄바꿈모든 단어를 글자 단위로 줄바꿈 가능
정상 단어자연스러운 위치에서 줄바꿈글자 단위로 잘릴 수 있음
가독성높음 (단어 유지)낮음 (모든 단어 잘림 가능)
권장 용도사용자 콘텐츠, URL 포함 텍스트CJK 혼합 텍스트, 좁은 컬럼

클래스별 상세

ownoverflow-wrap: normal

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

<!-- 기본 동작: 긴 단어가 넘칠 수 있음 -->
<div class="own w20rem">
  https://verylongdomainname.example.com/path/to/resource
</div>

owbwoverflow-wrap: break-word

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

<!-- 사용자 콘텐츠에 적용 -->
<div class="owbw w20rem">
  https://verylongdomainname.example.com/path/to/resource
</div>

<!-- 댓글 영역 -->
<div class="owbw p16px bg18181B br8px">
  사용자가 입력한 텍스트에 긴 URL이나
  연속된 문자가 포함되어도 안전합니다.
</div>

owaoverflow-wrap: anywhere

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

<!-- flex 컨텍스트에서 줄어들 수 있음 -->
<div class="df gap16px">
  <div class="owa fg1 fb0">
    Superlongwordthatmightoverflow는
    flex 아이템에서도 줄어들 수 있습니다
  </div>
  <div class="fg1 fb0">옆 영역</div>
</div>

팁 & 주의사항

사용자 콘텐츠에는 owbw

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

hyphens와 조합

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

word-breakwhite-spacehyphens