[CSS] 줄바꿈 속성 word-break / word-wrap

줄바꿈 속성

word-break

• normal break-all keep-all *keep-all 의 경우 2015년 6월부터 webkit에서도 지원

  	normal	break-all	keep-all
  중단점	공백(띄어쓰기/하이픈)	음절	공백(띄어쓰기/하이픈)

• 위와 같은 기본 속성을 기반으로, 모든 문자가 해당된다고 생각하였으나, 언어별로도 적용되는 범위에 차이가 발생할 수 있으며, 특수문자의 경우 해당되지 않는다는 사실을 뒤늦게 발견했다.

word-wrap

• word-wrap의 경우 텍스트 박스를 기준으로 '넘침'을 판단하기 때문에, 박스 가로 영역을 기준으로 특수문자나 다국어 문자가 포함된 문장에서도 줄바꿈 처리를 적용할 수 있다.
• 주로 word-break 를 사용해와서 word-wrap 속성에 대해서 알게된 건 이번이 처음이었다.

🤔 물음표는 word-break에 걸리지않는다는... 새로운 사실을 바탕으로, word-wrap 속성을 처음 찾아보게 되었는데, word-break와 word-wrap 속성을 선택해서 사용한다기보다는 기본적으로 normal 값을 가지므로, 경우에 따라 2가지 속성을 동시 적용해야할 때도 있다.

UI 버그 FIX

적용완료!