티스토리 뷰
발생일: 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;
참고:
반응형
댓글
공지사항