word-wrap, word-break 줄바꿈 속성 차이

발생일: 2015.11.08

키워드: word-wrap, word-break, 줄바꿈

문제:
word-wrap 과 word-break는 늘 헷갈린다.
어떤 경우에 어떤 것을 써야할 지 헷갈려서, 대충 검색 후에 붙여넣어 왔던 것 같다.

이참에 어떻게 적용하면 될 지를 명확하게 정리해두자.


해결책:

word-wrap 은 긴 텍스트를 강제로 자를 것인지에 대한 옵션이다.
이 속성이 누락되어 있으면 보통 긴 URL이 엘리먼트 밖으로 삐져나오게 된다.
normal 과 break-word 옵션이 있고, 줄바꿈을 적용할 것이라면 break-word 를 할당하면 된다.

word-break 는 줄바꿈을 어떻게 할 것인지에 대한 옵션이다.
아시아/비아시아 언어 기준으로 구분되지만, 간단하게-
한글을 포함해 단어 기준으로 줄바꿈하려면 keep-all 을,
글자 단위로 모두 자르려면 break-all 을 쓰면 된다.

덧) 줄바꿈을 적용하려는 엘리먼트는 (당연히) width 가 제한되어 있어야 한다.


논의:

실제론 아래 두 가지로 정리해 기억하고 있으면 되겠다.

- 줄바꿈을 할 건데, 글자 단위로 모두 자를 생각이라면,
  word-wrap: break-word;
  word-break: break-all;

- 줄바꿈을 할 건데, 단어 단위로 자를 생각이라면,
  word-wrap: break-word;
  word-break: keep-all;


참고:


카테고리

분류 전체보기 (710)
About me. (6)
Daylogs (675)
영어공부 (0)
My works - 추억 (29)
비공개 (0)