블로그 프로필 이미지



사실 word-wrap 프로퍼티와 word-break 프로퍼티는 같은 목적으로 사용된다. 하지만, 브라우저별로 지원하는 방식이 달라서, 쓰기가 애매모호 할때가 많다. 물론 해결방법이 있긴 있지만, 앞으로 꼭 개선되어야 할 부분중 하나이다.


예제를 보여주고 싶지만, 브라우저 마다 전부 달라서, 사용가능한 방법만 소개할까 한다. 우선 word-wrap 프로퍼티 와 word-break 프로퍼티 의값으로 올 수 있는 것들을 살펴보도록 하자. 아래는 각각 프로퍼티 값으로 올 수 있는 값들과 설명이다. 


 word-wrap 프로퍼티


normal 브라우저에 설정된 기본값이다, 이값으로 설정하여도 한글같은 경우 줄바꿈이 자동으로 되는것같지만, 영문일경우는 스페이스바 나 탭 또는 엔터로 띄운 공간이 없을경우 줄바꿈이 되지 않는다.


break-word  CSS3 표준안에는 텍스트가 넘칠경우 단어를 기준으로 자른다고 설명되어있다. 여기서 말하는 단어는 의미있는 단어가 아니라 위에서 말한 스페이스바 나 탭 또는 엔터로 띄운 단어를 말한다. 참고로 한글같은 경우 익스에서는 normal 값과 동일하게 설정된다. 


break-word CSS3 표준안에는 텍스트가 넘칠경우 단어를 기준으로 자른다고 설명되어있다. 여기서 말하는 단어는 의미있는 단어가 아니라 위에서 말한 스페이스바 나 탭 또는 엔터로 띄운 단어를 말한다. 참고로 한글같은 경우 익스에서는 normal 값과 동일하게 설정된다.


initial  초기 속성값이다. 이값을 설정하면 기본값으로 제공되는 normal 값과 같은 설정이 된다. 참고로 익스에서는 이값을 지원하지 않는다.


inherit  부모로 부터 값을 물려받는다. 이 값을 지정하면 부모요소에 적용된 값으로 설정이 된다. 


 word-break 프로퍼티


normal word-wrap 프로퍼티  normal 값과 같다.


break-all 단어가 아닌 요소의 크기에 맞추어 줄바꿈을 해준다. 보통 이값을 많이 사용한다.


keep-all 이 값은 스페이스바 나 탭 또는 엔터로 띄운 단어를 기준으로 자른다. 만약 띄어쓰기가 없다면 줄바꿈이 되지 않는다. 참고로 익스에서만 지원이 된다. 


initial word-wrap 프로퍼티  initial 값과 같다.


inherit word-wrap 프로퍼티  inherit 값과 같다.


위의 프로퍼티값들은 정말로 헷갈리는 것들이다. 하지만, 어려워 할 필요는 없다. 줄바꿈만 필요하다면 word-break 프로퍼티 break-all 값으로 설정하면된다. break-all 값같은 경우 어떠한 경우가 오더라도 요소 크기에 맞추어 줄바꿈을 하기 때문에, 모든 브라우저에서 최대한 비슷하게 볼 수 있다.나같은 경우도 아래와 같이 전체영역을 break-all 값으로 설정을 해놓앗다.


*{
    word-break:break-all;
 }


CSS는 알면 알 수록 복잡한것같다. 하루 빨리 모든 브라우저가 스타일이나 요소의 속성 그리고 스크립트에 대한 적용들이 통일 되었으면 좋겟다.

댓글
2015.02.05 18:13  Edit  Rep

비밀댓글입니다

2015.02.05 18:13  Edit  Rep

비밀댓글입니다

(비회원은 자신의 글을 볼 수 없습니다.)