본문 바로가기
CSS

wrap-overflow vs word-break 차이점

by devebucks 2022. 4. 18.
728x90

wrap-overflow

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

.overflow-wrap {
  overflow-wrap: break-word;
}

word-break

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

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

.word-break {
  word-break: break-all;  // 오버플로를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있습니다. (한중일 텍스트 제외)
}

 

728x90

댓글