단어 줄바꿈 CSS. word-break

word-break의 값으로 normal, keep-all, break-all이 올 수 있다. 

 

언어별로 normal과 keep-all의 결과가 다르다. 우선 셋의 값은

상자에 비해 줄이 길때 단어들을 다음문장으로 내려보내는데 차이가 있다.

 

break-all은 단어형태를 잘게 부순다. 가장 작은 단위의 문자를 내려보내다 보니 상자크기를 다채우는 편이라

break-all은 깔끔한 디자인을 할 수 있다.

 

keep-all은 단어형태를 지킨다. 심지어 하이픈으로 연결된 단어도 말이다. 그래서 단어 통째로 내려보내기 때문에

break-all에 비해 우측이 가득 차있지 않아 들쑥날쑥하지만,

단어의 의미를 잃지않아 의미전달에 있어서 중요할땐 가독성이 높은 keep-all이 좋다.

 

normal은 기본값인데

한국어는 기본값이 break-all과 같고, (normal = break-all)

영어는 기본값이 keep-all이다. (normal = keep-all)

 

단어가 부모의 박스보다 긴 경우 어떻게 해야할까?

우선 이 상황은 부모의 박스보다 단어가 길게 되면 박스를 뚫고 나오며

한국어는 기본값이 브레이크 올이라 이런 경우는 영문에서 나타날 것이다.

이때, word-break:break-all; 을 적어주면 된다.

 

하지만 이때, 깔끔한 디자인을 할 수 있지만 가독성이 떨어질 수 있다. 자동으로 하이픈이 생기는 것이 아니기때문이다.

그래서 가독성을 (keep-all)하면서 부분적으로 넘치는 단어만 깨뜨려 내려보내고 싶을 경우

word-wrap: break-word;

을 적용해 주면 된다.