CSS 의 word-wrap, word-break : 텍스트의 줄바꿈 형식을 지정하고 싶을때

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