파이어폭스의 줄바꿈 처리 Firefox line break

정말 오랜만에 쓰는 포스트이네요. 어제이지요? 어제 파이어폭스의 새로운 버전인 파이어폭스4가 세상에 나왔습니다. 출시 한지 얼마 되지 않아 엄청난 다운로드를 기록해서 이슈가 되었는데요. 더 빨라지고 더 좋아졌다고는 하는데 그것은 얼마만큼 써 봐야 알 수 있는 이야기 같습니다. 오늘 할 이야기는 최근에 있었던 파이어폭스의 줄바꿈에 대한 이슈에 대해서 입니다. 일전에 포스트 했던 [CSS] 텍스트 줄바꿈 처리 word-break, white-space 의 내용에서 이야기를 했던 내용이긴 한데요. 궁금하시면 먼저 대강 살펴보시고 오시는 것도 좋을 것 같습니다.

일을 하다보면 여러가지 상황을 고려해야 하는데, 정말 상식적으로 이해가 안가는 상황까지 고려해야 하는 경우가 있습니다. 저의 이번 경우는 설문 만드는 폼을 작업하는데, 알파벳이나 숫자를 띄어쓰지 않고 죽~ 쓰는 경우에 줄바꿈이 안되는 현상에 대처하였습니다. 뭐 설문을 만드는 영역이 작으면 이것은 당연한 일이긴 한데 엄청 큰 영역인데도 불구하고 엄청난 길이의 한단어 (숫자를 띄지 않고 계속 쓰는 것) 가 말썽을 피웠습니다.

파이어폭스에서는 word-break 속성이 적용되지 않습니다. 오직 Internet Explorer용 인데요. Firefox 에서 줄바꿈을 하기 위해서는 다음의 코드를 사용하면 됩니다.

---

{
white-space: pre-wrap; /* CSS3*/
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-all; /* Internet Explorer 5.5+ */ 
}

---

이런 방법을 사용하면 거의 모든 브라우져에서 줄바꿈을 할 수 있습니다. 내용이 좀 많아요. 줄바꿈 하나 하는데 이렇게 많은 코드를 추가하기는 좀 안타깝긴 한데요. 그렇지만 몇몇가지 브라우저를 고려해서 몇가지를 축약해서 사용한다면 좀 더 깔끔하게 사용할 수 있겠죠? 참고들 하시길.