2015 년 2 월 요약 (2017 년 11 월 부분 업데이트)

­구글은 여전히 ​​그것을 포함하는 단어를 색인 할 수 있기 때문에 모두 잘 수행 합니다.

• 브라우저에서 : ­ 그리고 ­둘 다 주요 브라우저에서 예상대로 표시됩니다 (이전 IE!). <wbr>최신 버전의 IE (10 또는 11)에서는 지원되지 않으며 Edge에서 제대로 작동하지 않습니다.
• 복사하여 브라우저에서 붙여 넣을 때 : (2015 년 시험)에 대한 예상대로 ­및 ­윈도우 (10)에, Mac에서 크롬과 파이어 폭스를 들어, 문자를 유지하고 그들을 지원하는 응용 프로그램에 메모장 보이지 않는 소프트 하이픈으로 하드 하이픈을 붙여 넣습니다. IE (win7)는 일부 응용 프로그램 (예 : MS Word)에서는 하이픈으로 붙여 넣는 방식으로 IE10에서도 항상 하이픈으로 붙여넣고 Safari (Mac) 사본은 붙여 넣습니다.
• 페이지에서 찾기 를위한 작품 ­과 ­(심지어 IE11까지)에만 정확히 일치하는 복사 및 붙여 넣은 일치 IE를 제외한 모든 브라우저에서
• 검색 엔진 : Google은 ­정상적으로 입력 된 단어가 포함 된 단어를 찾습니다. 2017 년 현재 더 이상 포함 된 단어와 일치하지 않는 것 같습니다 ­. Yandex는 동일합니다. 빙과 바이두도 일치하지 않는 것 같습니다.

그것을 테스트

최신 실시간 테스트를 위해 부드러운 하이픈이있는 고유 한 단어의 예가 있습니다.

• ­– confumbabbl­ication­ism공자주의
  • ………………………………………….. ………………………………………….. ………. 혼란주의
  • ………………………………………….. ………………………………………….. ………….. 혼란주의

<wbr>– donfounbabbl<wbr>ication<wbr>ism. 이 사이트는 <wbr/>출력에서 제거 됩니다. 다음 은 테스트를위한 jsbin.com 스 니펫입니다 .

• ­– eonfulbabbl­ication­ism비영리 풍자주의
  • ………………………………………….. ………………………………………….. …………. 불완전한 바베큐 법
  • ………………………………………….. ………………………………………….. ………………… 불완전한 바베큐 법

여기에는 부끄러운 하이픈이 없습니다 (페이지에서 찾기 테스트에 복사하여 붙여 넣기위한 것이며 검색 엔진 테스트를 중단하지 않는 방식으로 작성 됨).

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

여러 브라우저에 표시

성공 : 지정된 위치에서 끊어지고 하이픈을 넣을 때 끊어야하는 위치를 제외하고 일반 단어로 표시됩니다.

고장 : 비정상적으로 표시되거나 의도 한 장소에서 파손되지 않습니다.

• Chrome (40.0.2214.115, Mac) : ­성공, <wbr>성공, ­성공
• Firefox (35.0.1, Mac) : ­성공, <wbr>성공, ­성공
• Safari (6.1.2, Mac) : ­성공, <wbr> 아직 테스트되지 않음 , ­성공
• Edge (Windows 10) : ­성공, <wbr> 실패 (중단하지만 하이픈 없음), ­성공
• IE11 (Windows 10) : ­성공, <wbr> 실패 (휴식 없음), ­성공
• IE10 (Windows 10) : ­성공, <wbr> 실패 (휴식 없음), ­성공
• IE8 (Windows 7) : 불규칙한 경우도 있지만 전혀 작동하지 않으며 모두 CSS를 따릅니다 word-wrap. 때때로 그들은 모든 일을하는 것처럼 보입니다. 이유에 대한 명확한 패턴을 아직 찾지 못했습니다.
• IE7 (Windows 7) : ­성공, <wbr>성공, ­성공

여러 브라우저에서 복사하여 붙여 넣기

성공 : 단어 전체를 복사하지 않고 붙여 넣습니다. (브라우저 검색, MS Word 2011 및 Sublime Text에 붙여 넣은 Mac에서 테스트)

실패 : 하이픈, 공백, 줄 바꿈 또는 정크 문자로 붙여 넣기

• Chrome (40.0.2214.115, Mac) : ­성공, <wbr>성공, ­성공
• Firefox (35.0.1, Mac) : ­성공, <wbr>성공, ­성공
• Safari (6.1.2, Mac) : MS Word에 ­ 실패 (모두 하이픈으로 붙여 넣기), 다른 응용 프로그램에서의 성공 <wbr> 실패 , MS Word에 ­ 실패 (모두 하이픈으로 붙여 넣기), 다른 응용 프로그램에서의 성공
• IE10 (Win7에가) ­ 실패 , 모든 하이픈으로 페이스트를 <wbr> 실패 , ­ 실패 하이픈 모든 페이스트를
• IE8 (Win7에가) ­ 실패 , 모든 하이픈으로 페이스트를 <wbr> 실패 , ­ 실패 하이픈 모든 페이스트를
• IE7 (Win7에가) ­ 실패 , 모든 하이픈으로 페이스트를 <wbr> 실패 , ­ 실패 하이픈 모든 페이스트를

검색 엔진 일치

2017 년 11 월에 업데이트되었습니다. <wbr>StackOverflow의 CMS가이를 제거했기 때문에 테스트되지 않았습니다.

성공 : 하이픈이없는 단어 전체를 검색하면이 페이지가 나타납니다.

실패 : 검색 엔진은 단어의 깨진 세그먼트 나 하이픈이있는 단어를 검색 할 때만이 페이지를 찾습니다.

• 구글 : ­실패, ­성공
• Bing : ­실패, ­실패
• 바이두는 : ­, 실패 ­(긴 문자열 내에서 조각을 일치 할 수 있지만, 자신의 단어를 포함하지 않는 실패 ­또는 ­)
• Yandex : ­실패, ­성공 (100 % 확실하지 않은 Baidu와 같은 문자열 조각과 일치 할 수 있음)

여러 브라우저에서 페이지에서 찾기

검색 엔진 일치로 성공 및 실패

• Chrome (40.0.2214.115, Mac) : ­성공, <wbr>성공, ­성공
• Firefox (35.0.1, Mac) : ­성공, <wbr>성공, ­성공
• Safari (6.1.2, Mac) : ­성공, <wbr>성공, ­성공
• IE10 (Win7에가) ­ 실패 만은 모두 수줍음 하이픈 포함되어있는 경우 일치 <wbr>성공, ­ 실패 만이 모두 수줍음 하이픈을 포함 할 때 일치
• IE8 (Win7에가) ­ 실패 만은 모두 수줍음 하이픈 포함되어있는 경우 일치 <wbr>성공, ­ 실패 만이 모두 수줍음 하이픈을 포함 할 때 일치
• IE7 (Win7에가) ­ 실패 만은 모두 수줍음 하이픈 포함되어있는 경우 일치 <wbr>성공, ­ 실패 만이 모두 수줍음 하이픈을 포함 할 때 일치

답변

innehålls­förteckning

innehållsförteckning

innehålls-
förteckning

ABCDEFG<wbr/>abcdefg

ABCDEFGabcdefg

ABCDEFG
abcdefg

​

⁠

(function($) {
  $.fn.breakWords = function() {
    this.each(function() {
      if(this.nodeType !== 1) { return; }

      if(this.currentStyle && typeof this.currentStyle.wordBreak === 'string') {
        //Lazy Function Definition Pattern, Peter's Blog 
        //From http://peter.michaux.ca/article/3556 
        this.runtimeStyle.wordBreak = 'break-all';
      }
      else if(document.createTreeWalker) {

        //Faster Trim in Javascript, Flagrant Badassery 
        //http://blog.stevenlevithan.com/archives/faster-trim-javascript 

        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);
        };

        //Lazy Function Definition Pattern, Peter's Blog 
        //From http://peter.michaux.ca/article/3556 

        //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;
          //we need to trim String otherwise Firefox will display 
          //incorect text-indent with space characters 
          s = trim( node.nodeValue ).split('').join(c);
          node.nodeValue = s;
        }
      }
    });

    return this;
  };
})(jQuery);