word-break에 대한 개념 정리

word-break에 대한 개념 정리

word-break는 업무상에서 글자를 적정한 위치에서 줄 바꿈해줄 때 사용한다.

정확히는 word-wrap 또한 같이 사용되고 이러한 값들이 CJK(Chinese, Japanese, Korean) 및 non-CJK 에 따라 구분되어 적용이 된다.

(참고)

* CJK(Chinese, Japanese, Korean)

* non-CJK (그 외 언어 : 영어, 숫자, 베트남어 등)

word-break 개념

단어의 분리를 어떻게 할 것인지 결정한다.

예) (공백/띄어쓰기) 날씨가`좋아요

예) (음절) 날`씨`가`좋`아`요`

work-break 속성 (DOC에 설명된 개념을 적기엔 이해하기 모호한 부분이 있어서 각 속성별로 정리한 표를 첨부함)

/* Keyword values */

word-break: normal; 

word-break: break-all; 

word-break: keep-all;

word-break: break-word; /* non-standard */ 

/* Global values */

word-break: inherit;

word-break: initial;

word-break: unset;

	normal (기본값)	break-all	keep-all (CJK에만 적용됨)
non-CJK	중단점: 공백(띄어쓰기, 하이픈’-‘)	중단점: 음절	중단점: 공백(띄어쓰기, 하이픈’-‘)
CJK	중단점: 음절	중단점: 음절	중단점: 공백(띄어쓰기, 하이픈’-‘, 그 외 기호)

word-wrap 개념

박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정한다.

word-wrap 속성 (word-break와 마찬가지로 표를 첨부)

/* Keyword values */

word-break: normal; 

word-break: break-word; 

	normal (기본값)	break-word
non-CJK	단어넘침 O	단어넘침 X
CJK	단어넘침 X	단어넘침 X

word-break, word-wrap 을 조합해서 많이 사용을 하고 개인적으론 공백을 기준으로 줄바꿈 하는 것을 선호해서

word-break: keep-all; word-wrap:break-word;

를 많이 사용할 것 같지만 상황에 맞게 두 속성을 적절히 잘 조합해서 사용하면 될 것 같다.

출처 : https://wit.nts-corp.com/2017/07/25/4675

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