[CSS] word-break vs. overflow-wrap

텍스트 줄바꿈을 제어할 때 자주 보게 되는 CSS 속성이 word-break입니다.

처음에는 overflow-wrap과 비슷해 보여 역할이 헷갈렸지만, 두 속성은 줄바꿈을 제어하는 방식에 차이가 있습니다.

word-break

word-break는 텍스트를 줄바꿈할 때 단어를 어느 위치에서 나눌지 설정하는 CSS 속성입니다.

normal

word-break: normal;

브라우저의 기본 줄바꿈 규칙을 따릅니다.

영문은 일반적으로 공백이나 하이픈을 기준으로 줄바꿈되고, 한글은 글자 사이에서 줄바꿈될 수 있습니다.

break-all

word-break: break-all;

텍스트가 영역을 초과하면 단어의 중간에서도 줄바꿈합니다.

영문 단어도 글자 단위로 나뉠 수 있습니다.

keep-all

word-break: keep-all;

한글, 중국어, 일본어와 같은 CJK 텍스트에서 단어 중간 줄바꿈을 제한합니다.

공백을 기준으로 줄바꿈하기 때문에 공백이 없는 긴 문자열은 영역을 넘어갈 수 있습니다.

overflow-wrap

overflow-wrap은 텍스트가 영역 밖으로 넘치는 상황에서 추가적인 줄바꿈을 허용하는 속성입니다.

overflow-wrap: break-word;

word-break가 기본 줄바꿈 규칙 자체를 변경한다면, overflow-wrap은 기존 규칙으로 처리하기 어려운 긴 문자열이 영역을 넘을 때 줄바꿈을 허용합니다.

normal

overflow-wrap: normal;

기본 줄바꿈 위치에서만 줄바꿈합니다.

break-word

overflow-wrap: break-word;

문자열이 영역을 넘을 경우 단어 중간에서 줄바꿈합니다.

anywhere

overflow-wrap: anywhere;

필요한 경우 문자열의 어느 위치에서든 줄바꿈을 허용합니다.

정리

두 속성 모두 줄바꿈을 제어하지만, word-break는 줄바꿈 규칙을 변경하고 overflow-wrap은 넘치는 문자열을 처리한다는 차이가 있습니다.

참고

• MDN Web Docs - word-break
• MDN Web Docs - overflow-wrap