CSS - 줄바꿈 word-break & word-wrap #1

HTML 에서 텍스트가 콘텐츠 박스 밖으로 오버플로우 할 때 '단어의 분리'를 어떻게 할 것인지 정하는 속성 두 가지가 있다.

 

word-break 와 word-wrap

• word-break: 줄 끝에 오는 단어를 잘라서 컨테이너에 맞춘다.
• word-wrap: 단어 자체가 줄을 차지할 때 딴어를 잘라서 컨테이너에 맞춘다.

word-break

• normal:
  • CJK(중국어, 일본어, 한국어): 음절 단위 분리
  • non-CJK: 공백(띄어쓰기, 하이픈('-') 단위 분리
• breaek-all
  • CJK: 음절단위 분리 안함
  • non-CJK: 음절 단위 분리
• keep-all
  • CJK: 음절단위 분리 안함
  • non-CJK: 공백(띄어쓰기, 하이픈('-')) 단위 분리 (normal과 동일)
• break-word: 글자 기준 줄바꿈.

word-wrap

• break-word: 줄을 넘어가는 부분을 잘라서 줄을 바꾼다.