프론트엔드

[CSS] 줄바꿈 기준 word-break 속성 (normal, keep-all, break-all)

seomoon 2022. 1. 1. 23:32

word-break 속성을 통해 단어 단위로 줄바꿈을 할지, 글자 단위로 줄바꿈을 할지 설정할 수 있다.

단어 단위로 줄바꿈을 한다는 것은, 이렇게 컨텐츠 크기가

길어질 때 단어를 쪼개지 않고 줄바꿈을 하는 것을 말한다. 
글자 단위로 줄바꿈을 하는 것은, 이렇게 컨텐츠 크기가 길

어질 때 단어를 쪼개고 글자 단위로 줄바꿈을 하는 것이다.

옵션은 normal, keep-all, break-all 세 가지가 있다.

  • normal (기본값) : 영어는 단어 단위로 줄바꿈, 한글은 글자 단위로 줄바꿈
  • keep-all : 영어, 한글 모두 단어 단위로 줄바꿈
  • break-all : 영어, 한글 모두 글자 단위로 줄바꿈

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