CSS 적용시 중요 부분 정리

회사에서 html 만드는 중에 단어별로 짤라 개행을 하느라 일일이 </br>을 넣는게.. 느므느므 귀찮다는거...
영어야 뭐 띄어쓰기 기준으로 알아서 개행이 되지만 한글은 그렇지가 않다는거..

예전에 서점에서 언뜻 본듯한 기억이 있어서 찾아봤더니

word-break:keep-all  

이녀석이 그 기능을 하게 해준다고 한다.
기특해라.. 

적용 차이를 비교하기 위해 table의 td 태그에 위 스타일을 적용해보았다.
텍스트는 위 자료를 찾기 위해 서핑하다가 걍 아무데서나 보이는데로 주워왔다.

미적용상태

본문보기 및 뎃글보기에 사용된 코드입니다. URL과 같은 띄어쓰기가 없는 장문의 내용이 입력되는 경우 및 악의적인 장문의 내용이 입력되면 줄바꾸기가 되지 않아 레이아웃이 무너지는 경우가 있습니다. 이 경우, IE에서는 word-break:break-all을 사용하면 문제없이 줄바꿈이 됩니다만, Netscape 및 FireFox의 경우는 적용되지 않습니다. 이를 위해 overflow:hidden을 사용하면, 가로크기의 한도를 넘어서는 내용은 보여주지 않도록 하여 박스레이아웃을 유지할 수 있습니다. (주, IE의 경우는 word-break 속성에 의해 줄바꿈이 되기 때문에 문제가 없으나, FireFox의 경우, 레이아웃은 유지하나 내용을 볼 수 없게 됩니다.)

적용상태

본문보기 및 뎃글보기에 사용된 코드입니다. URL과 같은 띄어쓰기가 없는 장문의 내용이 입력되는 경우 및 악의적인 장문의 내용이 입력되면 줄바꾸기가 되지 않아 레이아웃이 무너지는 경우가 있습니다. 이 경우, IE에서는 word-break:break-all을 사용하면 문제없이 줄바꿈이 됩니다만, Netscape 및 FireFox의 경우는 적용되지 않습니다. 이를 위해 overflow:hidden을 사용하면, 가로크기의 한도를 넘어서는 내용은 보여주지 않도록 하여 박스레이아웃을 유지할 수 있습니다. (주, IE의 경우는 word-break 속성에 의해 줄바꿈이 되기 때문에 문제가 없으나, FireFox의 경우, 레이아웃은 유지하나 내용을 볼 수 없게 됩니다.)

적용한 상태의 테이블 영역과 텍스트의 흐름을 보면 단어의 어절에 맞게 개행이 이루어 진 것을 볼 수 있다.
역시 머리가 나쁘면 몸이 고생해.. -ㅅ-

ps. 이 CSS속성은 현재 IE에서만 지원된다고 합니다. 자세한 내용은 정찬명님의 댓글을 읽어주세요. ^^
텍스트로만 뿌려놓아 헤깔릴 분들이 계실까봐 이미지 캡쳐해서 올립니다.

1. IE6~IE7

2. FF 2.x