overflow-wrap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

overflow-wrap CSS 요소는 어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용됩니다.

참고: word-break와는 달리, overflow-wrap은 모든 단어가 넘치지 않으면 자신의 줄 안에 놓여 있을 수 없을 때 줄 바꿈을 한 번만 할 것입니다.

이 속성은 처음에 마이크로소프트에서 표준이 아니고 접두어가 없는 word-wrap으로 나왔고, 대부분 브라우저에서 똑같은 이름으로 구현되었습니다. 요즘은 overflow-wrap으로 다시 지어지고, word-wrap은 동의어가 되었습니다.

구문

css
/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;

/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;

overflow-wrap 속성은 아래에 나열돼 있는 값들 중 단 하나로 정해집니다.

normal

줄이 오직 (두 단어 사이의 공백과 같이) 보통의 줄 바꿈 지점에서만 줄을 바꿉니다.

break-word

보통 안 바꿔지는 단어들을 한 줄에서 대신 줄을 바꿀 만한 지점이 없을 시 임의의 지점에서 줄을 바꿉니다.

기본적인 구문

overflow-wrap = 
normal |
break-word |
anywhere

예시

이 예시는 긴 단어를 넘길 때 overflow-wrap, word-break, 그리고 hyphens의 결과를 비교합니다.

HTML

html
<p class="normal">
  They say the fishing is excellent at Lake
  Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there
  myself. (normal)
</p>
<p class="overflow-wrap">
  They say the fishing is excellent at Lake
  Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there
  myself. (overflow-wrap)
</p>
<p class="word-break">
  They say the fishing is excellent at Lake
  Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there
  myself. (word-break)
</p>
<p class="hyphens">
  They say the fishing is excellent at Lake
  Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there
  myself. (hyphens)
</p>

CSS

css
p {
  width: 13em;
  background: gold;
}

.overflow-wrap {
  overflow-wrap: break-word;
}

.word-break {
  word-break: break-all;
}

.hyphens {
  hyphens: auto;
}

Result

명세서

Specification
CSS Text Module Level 3
# overflow-wrap-property

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
overflow-wrap
anywhere
break-word
normal

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

바로 보기