overflow-wrap 속성의 이해

overflow-wrap 속성은
음절 단위에서 줄바꿈하지 않는 텍스트가 너무 길어 텍스트 박스에서 줄바꿈이 불가능할 때(오버플로할 때)
브라우저가 줄바꿈을 허용하지 않는 지점에서도 줄바꿈을 허용할 수 있는 지점을 지정합니다.

overflow-wrap 속성의 작동 원리를 이해하려면 '음절 단위에서 줄바꿈하지 않는 텍스트'에 대한 이해가 필요합니다.

음절 단위에서 줄바꿈하지 않는 텍스트

음절 단위에서 줄바꿈하지 않는 텍스트는 word-break 속성의 설정 값과 관련이 있는데 언어별로 차이가 있습니다.

부연설명
word-break 속성은 텍스트가 텍스트 박스의 끝에 도달했을 때 해당 텍스트의 단어(word)를 어떻게 줄바꿈할지(break) 지정합니다.

다음의 예제로 확인해 보세요.

HTML 
<p class="en">
    There's a veryveryveryveryveryveryveryveryveryveryveryvery longlonglonglonglonglonglonglong-longlonglonglong sentence.
</p>
<p class="ko">
    학교종이 땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡 어서 모이자. 선생님이 우리를 기다리신다.
</p>
CSS 
p {
    width: 200px;
    padding: 0.5em;
    background-color: gold;
}
.en {
    word-break: normal;
}
.ko {
    word-break: keep-all;
}
실제 적용된 모습
  • 영어와 같은 알파벳은 word-break: normal이 설정되어 있는 경우 음절 단위에서 줄바꿈하지 않고 단어 단위에서 줄바꿈합니다.
  • CJK(중국어, 일본어, 한국어)는 word-break: keep-all이 설정되어 있는 경우 단어의 끝(단어와 단어 사이의 공백)에서만 줄을 바꿉니다.

알아두세요!
음절 단위에서 줄바꿈하지 않는 텍스트가 아닌 음절 단위에서 줄바꿈하는 텍스트에는 overflow-wrap 속성이 효과가 없습니다.

또한, '음절 단위에서 줄바꿈하지 않는 텍스트'라고 할지라도, white-space 속성으로 줄바꿈을 허용하지 않게 설정하면 overflow-wrap 속성이 효과가 없습니다.
예를 들어, white-space: nowrap이나 white-space: pre로 설정된 텍스트는 overflow-wrap 속성이 효과가 없습니다.

부연설명
white-space 속성은 요소 내부의 공백 문자(Whitespace) 처리와 줄바꿈 규칙을 지정합니다.

형식 구문

CSS 
selector {
    overflow-wrap: normal | break-word | anywhere;
}

구문

CSS 
/* 키워드 값 */
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

/* 전역 값 */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: revert;
overflow-wrap: revert-layer;
overflow-wrap: unset;

값

overflow-wrap 속성의 값
normal 초깃값임.
텍스트가 너무 길어 텍스트 박스에서 줄바꿈이 불가능할 때(오버플로할 때) 브라우저가 줄바꿈을 허용하지 않는 지점에서는 줄바꿈을 허용하지 않습니다.
anywhere 오버플로를 방지하기 위해, 긴 단어나 URL처럼 끊어지지 않는 텍스트는 줄에 다른 용도로 허용되는 줄바꿈 지점이 없는 경우 언제든지 끊어질 수 있습니다. 줄바꿈 지점에는 하이픈(-, Hyphen) 문자가 삽입되지 않습니다.
이때, min-content 값을 계산해야 할 경우에는 임의의 지점이 고려됩니다.
break-word anywhere 값과 동일하지만, min-content 값을 계산해야 할 경우에도 임의의 지점이 고려되지 않습니다.

형식 정의

overflow-wrap 속성의 형식 정의
초깃값 normal
적용대상 텍스트가 있는 모든 요소
상속 예
애니메이션 아니오

예제

두 가지 예제를 통해서 overflow-wrap 속성의 작동 방식에 대해 확인해 보겠습니다.

일반적인 상황

일반적인 상황에서 overflow-wrap: normal, overflow-wrap: anywhere, overflow-wrap: break-word가 어떻게 작동하는지 살펴보겠습니다.

HTML 
<h4>overflow-wrap: normal</h4>
<p class="normal">
    There's a veryveryveryveryveryveryveryveryveryveryveryvery
    longlonglonglonglonglonglonglong-longlonglonglong sentence.
</p>
<h4>overflow-wrap: anywhere</h4>
<p class="anywhere">
    There's a veryveryveryveryveryveryveryveryveryveryveryvery
    longlonglonglonglonglonglonglong-longlonglonglong sentence.
</p>
<h4>overflow-wrap: break-word</h4>
<p class="break-word">
    There's a veryveryveryveryveryveryveryveryveryveryveryvery
    longlonglonglonglonglonglonglong-longlonglonglong sentence.
</p>
CSS 
p {
    width: 200px;
    padding: 0.5em;
    background-color: gold;
    word-break: normal;
}
.normal {
    overflow-wrap: normal;
}
.anywhere {
    overflow-wrap: anywhere;
}
.break-word {
    overflow-wrap: break-word;
}
실제 적용된 모습

실제 적용된 모습을 보면, overflow-wrap: normal이 설정된 경우에는 텍스트가 너무 길어 텍스트 박스에서 줄바꿈이 불가능할 때(오버플로할 때) 브라우저가 줄바꿈을 허용하지 않는 지점에서는 줄바꿈을 허용하지 않지만 overflow-wrap: anywhere과 overflow-wrap: break-word가 설정된 경우에는 줄바꿈하지 않는 텍스트가 텍스트 박스의 끝에 도달했을 때 텍스트가 끊어지면서 줄바꿈하는 것을 볼 수 있습니다.

이때, overflow-wrap: anywhere과 overflow-wrap: break-word가 동일하게 작동하는 것도 확인할 수 있습니다.
그렇다면, overflow-wrap: anywhere과 overflow-wrap: break-word의 차이점은 어느 상황에 알 수 있는지를 다음의 예제를 통해 확인해 보겠습니다.

overflow-wrap: anywhere과 overflow-wrap: break-word의 차이점

overflow-wrap: anywhere과 overflow-wrap: break-word의 차이점은 텍스트 박스에 min-content 값을 계산해야 할 경우에 알 수 있습니다.

HTML 
<h4>overflow-wrap: anywhere</h4>
<p class="anywhere">
    width의 min-content
</p>
<h4>overflow-wrap: break-word</h4>
<p class="break-word">
    width의 min-content
</p>
CSS 
p {
    width: min-content; /* width에 min-content 값을 지정함 */
    padding: 0.5em;
    background-color: gold;
    word-break: normal;
}
.anywhere {
    overflow-wrap: anywhere;
}
.break-word {
    overflow-wrap: break-word;
}
실제 적용된 모습

실제 적용된 모습을 보면, overflow-wrap: anywhere이 설정된 경우에는 width: min-content로 설정된 min-content 값을 고려해서 줄바꿈이 되지만, overflow-wrap: break-word는 그렇지 않다는 차이점이 있습니다.

브라우저 호환성

overflow-wrap 속성의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
overflow-wrap 23 18 49 7
normal 1 12 3.5 1
break-word 1 12 3.5 1
anywhere 80 80 65 15.4

명세서

overflow-wrap 속성의 명세서 사양
명세서 사양
overflow-wrap CSS Text Module Level 3
#overflow-wrap-property

참고문헌

같이 보기