[CSS] overflow-wrap/word-wrap, word-break - 줄 바꿈 스타일

overflow-wrap / word-wrap

인라인 요소에 적용되는 속성으로 단어가 박스 밖으로 넘치지 않게 줄 바꿈을 설정할 때 사용하는 속성.

즉, 한 라인에서 단어가 넘칠 경우 이를 어떻게 처리할지에 대해 설정하는 속성.

초기에 표준이 아닌 word-wrap 속성으로 대부분의 브라우저에서 구현되었는데,

overflow-wrap으로 속성명을 재정의 하여 word-wrap과 overflow-wrap은 동일한 속성명으로 사용되고 있다.

 

값

/* 1. overflow-wrap */
overflow-wrap: normal;
overflow-wrap: anywhere;
overflow-wrap: break-word;

/* 2. word-wrap */
word-wrap: normal;
word-wrap: break-word;

normal

보통의 줄 바꿈 지점에서만 줄 바꿈이 된다. (두 단어 사이의 공백과 같은 보통의 줄 바꿈 지점)

따라서, 단어가 길 경우 줄 바꿈이 되지 않고 넘치는 경우가 생길 수도 있다.

anywhere

컨테이너를 넘치게 되면 어느 곳에던 줄 바꿈이 생긴다. 만약 하나의 긴 단어가 컨테이너를 넘어간다면 단어가 짤릴 수가 있다.

break-word

anywhere과 기능적으로 동일하다. anywhere와의 차이점은 min-content를 계산하는 방식에서 차이가 난다. break-word는 min-content를 계산할 때 soft wrap(브라우저 및 기타 사용자 에이전트에서 허용된 중단점에서 컨텐츠를 wrap 하는 것)을 고려하지 않지만, anywhere은 이를 고려한다. (하지만 이 차이는 실제 실무에서 유의미한 차이가 있는거 같진 않아서 거의 유사하다고 생각하면 될거 같다.)

 

🌎 브라우저 지원범위

- 일부 브라우저에서 예전 속성명인 "word-wrap"으로 써야 적용

- https://caniuse.com/?search=overflow-wrap

 

word-break

단어가 넘칠 경우 단어를 어디서 끊을지 정확한 지점을 설정할 때 사용하는 속성.즉, overflow-wrap/word-wrap이 컨텐츠 내에서 넘치는 단어의 줄바꿈에 대해 설정하는 것이라면 word-break은 단어 자체의 줄바꿈 되는 지점(soft wrap)을 지정하는 속성이다.

 

값

word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* deprecated */

normal

기본 줄 바꿈 규칙을 사용한다.

break-all

어떤 문자에서든 줄 바꿈이 발생할 수 있다. (CJK 제외)

keep-all

CJK에서는 줄을 바꿀 때 단어를 끊지 않는다. CJK가 아닌 언어에서는 normal과 동일하다.
break-word  (deprecated)

제거된 속성이지만 레거시 이유로 브라우저에서 여전히 지원하고 있다.

word-break: normal 및 overflow-wrap: anywhere를 설정한 것과 같은 효과가 나타난다.

 

🌎 브라우저 지원범위

- https://caniuse.com/?search=word-break

 

📚 참고

- https://developer.mozilla.org/ko/docs/Web/CSS/overflow-wrap
- https://www.w3schools.com/cssref/css3_pr_word-wrap.php

- https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

- https://blog.logrocket.com/guide-css-word-wrap-overflow-wrap-word-break/