CSS로 단어 줄바꿈 설정하기

word-break

/* 키워드 값 */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* 사용 안함 */

/* 전역 값 */
word-break: inherit;
word-break: initial;
word-break: unset;

• normal
  • 기본 줄 바꿈 규칙을 사용합니다.
• break-all
  • 오버플로를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있습니다. (한중일 텍스트 제외)
• keep-all
  • 한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않습니다. 비 CJK 텍스트에서는normal과 동일합니다.
• break-word👎
  • 실제 overflow-wrap속성에 상관하지 않고,word-break: normal과overflow-wrap: anywhere를 설정한 것과 같은 효과를 냅니다.

참고 자료: MDN - word-break 문서

여기에서 overflow-wrap 속성이 무엇일까?

overflow-wrap

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

word-break와는 달리 overflow-wrap은 모든 단어중 하나가 자신의 줄 안에 놓여있을 수 없을 때 줄 바꿈을 한합니다.

처음에는 IE에서 지원되지 않았으나 요즘에는 word-wrap 과 같은 역할을 하는 동의어가 되어 활발히 사용중입니다.

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

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

참고 자료: MDN - overflow-wrap 문서

caniuse.com 에서 크로스 브라우징을 확인해봤다.

모던 브라우저는 전부 사용 가능하며,

IE 또한 부분적으로 지원하고 있다.