word-break 이런 문제가....

한글 단어자름 때문에 넣어두는 word-break 때문에 크롬이나 사파리에서 영문이 단어별로 잘리는게 아니라 글자 하나하나 잘리는 현상이 나타났다.

word-break:normal; 로 바꿔주면 해결. 이런 문제가 있었나.ㅡㅡ;ㅋ

css 를 같은 템플릿도 아니고 다른데 다 돌려쓰니 문제가 참 많네....



****예전부터 게속 쓰던 태그라 의심없이 썼었나보다. word-wrap 은 모든 브라우저 적용인데 왜 이걸 안쓰고....일단 이걸로 버전별 테스트 해봐야겠다.
/************************************************************************************/



이건 테이블에 데이터가 들어오는 경우...(게시판 같은거) 등등인듯

출처: http://www.mimul.com/pebble/default/2008/10/19/1224416040000.html

1. 브라우저별로 지원되는 word-break 속성

속성	Internet Explorer 5이상	Safari 3이상／Chrome
normal	○	○
keep-all	○	×
break-all	○	○

2. IE6, 7 적용 방안
 - class 나 style="word-break:break-all;" 식의 인라인 스타일

3. Firefox에서 임시 방편으로 적용 방안
 - overflow:hidden으로 사용하면 박스 레이아웃을 유지할 수 있음
 - 스크롤바가 하위에 생겨서 보기 싫음

4. jQuery를 활용한 Cross Browser애서 사용
 - FireFox나 Opera에서는 word-break:break-all 스타일이 비표준이라서 허용되지 않음
 - 다른 방법이 필요
 - Usage: $('[search]').breakWords();
 - 소스

  (function($) {


    $.fn.breakWords = function() {


      this.each(function() {


        if(this.nodeType !== 1) { return; }


  


        if(this.currentStyle 


          && typeof this.currentStyle.wordBreak === 'string') {


          this.runtimeStyle.wordBreak = 'break-all';


        }


        else if(document.createTreeWalker) {


          var trim = function(str) {


            str = str.replace(/^\s\s*/, '');


            var ws = /\s/,


            i = str.length;


            while (ws.test(str.charAt(--i)));


            return str.slice(0, i + 1);


          };


  


          //For Opera, Safari, and Firefox


          var dWalker = document.createTreeWalker(this, 


          NodeFilter.SHOW_TEXT, null, false);


          var node,s,c = String.fromCharCode('8203');


          while (dWalker.nextNode()) {


            node = dWalker.currentNode;


            s = trim( node.nodeValue ).split('').join(c);


            node.nodeValue = s;


          }


        }


      });


  


      return this;


    };


  })(jQuery);

[참고 사이트]

• http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
• http://snippets.dzone.com/posts/show/6271
• http://www.hedgerwow.com/360/dhtml/css-word-break.html
• http://blog.stevenlevithan.com/archives/faster-trim-javascript