[CSS] word-break / overflow-wrap(=word-wrap)

word-break

텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정한다.

See the Pen [CSS] word-break by mill (@millfeel) on CodePen.

word-break: normal(기본값) | break-all | keep-all;

[normal]

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

 

[break-all]
overflow를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있다. (한중일 텍스트 제외)

 

[keep-all]
한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않는다. 비 CJK 텍스트에서는 normal과 동일하다.

---

overflow-wrap(=word-wrap)

어떤 문자가 내용 칸 외부 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용된다.

*word-wrap(비표준)이 표준이 되어 overflow-wrap으로 다시 지어져서 둘은 동의어가 되었다.

See the Pen [CSS] overflow-wrap by mill (@millfeel) on CodePen.

---

Q. word-break와 overflow-wrap의 차이는 무엇인가요?

word-break는 줄바꿈을 단어 또는 글자 기준으로 하고,

overflow-wrap는 줄바꿈을 라인(줄)을 기준으로 한다.

---

[공부 좌표]

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

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap