웹 페이지에서 소프트 하이픈 문제를 어떻게 해결합니까? 텍스트에는 하이픈으로 줄 바꿈하려는 긴 단어가있을 수 있습니다. 그러나 전체 단어가 같은 줄에 있으면 하이픈을 표시하지 않으려 고합니다.

이 페이지의 의견에 따르면 <wbr>비표준 "Netscape가 발명 한 태그 수프"입니다. ­ 표준 준수에도 문제가있는 것 같습니다 . 모든 브라우저에서 작동하는 솔루션을 얻을 수있는 방법 이 없는 것 같습니다 .

소프트 하이픈을 처리하는 방법은 무엇이며 왜 선택 했습니까? 선호하는 솔루션이나 모범 사례가 있습니까?

불행히도 &shy의 지원은 브라우저간에 매우 일관성이 없어서 실제로 사용할 수 없습니다.

QuirksMode가 옳습니다. HTML에서 소프트 하이픈을 사용하는 좋은 방법은 없습니다. 그들없이 갈 수있는 일을보십시오.

2013 편집 : 쿼크 모드에 따르면 , ­현재 / 모든 주요 브라우저에서 지원됩니다 작동합니다.

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>성공, ­ 실패 만이 모두 수줍음 하이픈을 포함 할 때 일치

CSS3에서 하이픈 을 표준화 하기위한 지속적인 노력이 있습니다 .

일부 최신 브라우저, 특히 Safari 및 Firefox는 이미이를 지원합니다. 다음은 브라우저 지원에 대한 최신 정보입니다 .

CSS 하이픈이 보편적으로 구현되면 이것이 가장 좋은 해결책이 될 것입니다. 한편, 나는 추천 할 수 하이픈 붙이기를 - JS 스크립트를 그 특정 브라우저에 가장 적합한 방법으로 텍스트를 하이픈하는 방법을 그림.

하이픈 :

• LaTeX 및 OpenOffice에서 일반적으로 알려진 Franklin M. Liangs 하이픈 알고리즘 에 의존합니다 .
• 가능한 경우 CSS3 하이픈을 사용합니다.
• ­대부분의 다른 브라우저에 자동 삽입
• 여러 언어를 지원합니다
• 고도로 구성 가능하며
• 자바 스크립트가 활성화되지 않은 경우 정상적으로 작동합니다.

나는 그것을 사용했고 훌륭하게 작동합니다!

­필요한 경우 수동으로 삽입하여을 사용 합니다.

나는 항상 사람들이 기술을 사용하지 않는 것이 안타깝다는 것을 알고 있습니다. 왜냐하면 오래되었거나 이상한 브라우저가 있기 때문에 브라우저가 지정된 방식으로 처리하지 못하기 때문입니다. ­최신 Internet Explorer 및 Firefox 브라우저 모두에서 제대로 작동하는 것으로 나타났습니다 . 사람들에게 이상한 브라우저를 사용하는 경우 성인물을 사용하거나 스스로 위험을 감수하도록 지시하는 브라우저 검사를 포함 할 수 있습니다.

Syllabification은 쉽지 않으므로 Javascript로 남겨 두는 것이 좋습니다 . 언어 별 주제이며 텍스트를 자극하지 않으려면 데스크 맨이 신중하게 수정해야 할 수도 있습니다. 독일어와 같은 일부 언어는 복합 단어를 형성하며 분해 문제를 일으킬 수 있습니다. 예를 들어 Spargelder( 배균 저축 돈, pl.)은 음절 규칙에 따라 두 곳에 포장 될 수 있습니다 ( Spar-gel-der). 그러나 그것을 두 번째 위치로 감싸서 첫 번째 부분을 Spargel-( 배아 아스파라거스) 로 표시 하여 독자의 머리에 완전히 잘못된 개념을 활성화하여 피해야합니다.

그리고 문자열은 Wachstube어떻습니까? '보호실'( Wach-stu-be) 또는 '왁스 튜브 '( ) 를 의미 할 수 있습니다 Wachs-tu-be. 다른 언어로 된 다른 예제도있을 수 있습니다. 모든 핵심 단어를 교정하여 잘 정리 된 텍스트를 작성하는 데 데스크 맨이 지원 될 수있는 환경을 제공해야합니다.

HTML5에서 <wbr>와 ­ 똑같은 일을해서는 안된다는 것을 아는 것이 매우 중요합니다 !

부드러운 하이픈

­소프트 하이픈, 즉 U + 00AD : SOFT HYPHEN입니다. 예를 들어

innehålls­förteckning

로 렌더링 될 수 있습니다

innehållsförteckning

또는

innehålls-
förteckning

현재 소프트 하이픈은 Firefox, Chrome 및 Internet Explorer에서 작동합니다.

wbr요소

그만큼 wbr 요소 는 단어 분리 기회이며 줄 바꿈이 발생하면 하이픈이 표시되지 않습니다. 예를 들어

ABCDEFG<wbr/>abcdefg

로 렌더링 될 수 있습니다

ABCDEFGabcdefg

또는

ABCDEFG
abcdefg

현재이 요소는 Firefox 및 Chrome에서 작동합니다.

폭 이 0 인 공간 엔티티는 <wbr>거의 모든 플랫폼에서 안정적으로 태그 대신 사용될 수 있습니다 .

​

휴식을 금지하는 데 사용될 수있는 단어 결합 자 엔티티 도 유용합니다 . 휴식을 원하는 곳을 제외하고 단어의 각 문자 사이에 삽입하십시오.

⁠

이 두 가지로 무엇이든 할 수 있습니다.

이것은 클라이언트에서 실행되고 jQuery를 사용하여 조금 전에 살펴본 크로스 브라우저 솔루션입니다.

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

을 사용하는 것이 wbr좋으므로 코드를 다음과 같이 작성할 수 있습니다.

<p>这里有一段很长，很长的<wbr
></wbr>文字；这里有一段</p>

문자 사이에 ­공백이 생기지 않고 줄 바꿈으로 작성된 공백은 멈추지 않습니다.

내가 사용하는 소프트 하이픈 유니 코드 문자를 문제를 해결하기 위해 몇 가지 데스크톱 및 모바일 브라우저에서 성공적으로.

유니 코드 기호는 다음 \u00AD과 같이 Python 유니 코드 문자열에 삽입하기가 매우 쉽습니다.s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния' .

다른 해결책은 유니 코드 문자 자체를 삽입하는 것이며 Sublime Text, Kate, Geany 등과 같은 편집기에서 소스 문자열은 완벽하게 평범하게 보입니다 (커서는 보이지 않는 심볼을 느낄 것입니다).

사내 도구의 16 진 편집자가이 작업을 쉽게 자동화 할 수 있습니다.

쉬운 kludge는와 같이 희귀하고 눈에 띄는 문자를 사용 ¦하여 복사 및 붙여 넣기가 쉽고, 예를 들어 frontend script in을 사용하여 소프트 하이픈으로 대체하는 것입니다 $(document).ready(...). 같은 소스 코드 s = u'Языки и методы про¦гра¦м¦ми¦ро¦ва¦ния'.replace('¦', u'\u00AD')는보다 읽기 쉽다 s = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'.

엔터티 ­대신 유니 코드 문자열을 사용하면 웹 브라우저가 더 관대 해 보일 수 있습니다 ­.

운이 좋지 않고 여전히 JSF 1을 사용해야하는 경우 유일한 해결책은 & # 173 ;, & shy; 작동하지 않습니다.

<wbr> & shy;

오늘은 둘 다 사용할 수 있습니다.

<wbr> 는 더 많은 정보를 나누지 않고 깨는 데 사용합니다.

예를 들어, 링크를 표시하는 데 사용하십시오.

 https://stackoverflow.com/questions/226464/soft-hyphen-in-html-wbr-vs-shy

&수줍은; 필요한 경우이 시점에서 텍스트가 깨지고 하이픈이 추가됩니다.

예:

"에임시 수줍음, 수줍음, 수줍음, 수줍음, 음란 수음, 수줍음, 수줍음, 수줍음;

div{
  max-width: 130px;
  border-width: 2px;
  border-style: dashed;
  border-color: #f00;
  padding: 10px;
}

<div>https://<wbr>stackoverflow.com<wbr>/questions/226464<wbr>/soft-hyphen-in-<wbr>html-wbr-vs-shy</div>

<div>É im&shy;pos&shy;sí&shy;vel pa&shy;ra um ho&shy;mem a&shy;pren&shy;der a&shy;qui&shy;lo que ele acha que já sa&shy;be.</div>