CMS에서 부드러운 하이픈을 추가하십시오. Chrome에서 작동하도록하려면

Question

­은 특히 모든 인기있는 브라우저에서 작동하기 때문에 훌륭합니다. 단어의 중간에 넣으면 브라우저에 이라는 단어가 일 수 있음을 알립니다. 깨진 경우 하이픈이 나타납니다. 그렇지 않으면 캐릭터는 보이지 않습니다.

콘텐츠 작성자는 사용하기 쉽지 않습니다. HTML을 추가해야합니다. 을으로 추가해도 CMS에 추가하면 삽입 한 즉시 볼 수 없습니다.

그래서 저자가 사용하기 위해 CMS에서 인라인 스타일을 선언했습니다. 그들은 단어의 일부를 선택할 수 있습니다 (예 : <span class="shy">communi</span>cation). 그러면 CSS 규칙이 의사 요소를 사용하여 ­을 마술처럼 추가합니다! 그리고 일부 CMS 관련 CSS에서는 그 태그에 점선 밑줄을 붙이면 그 부드러운 하이픈 중 하나가 있다는 것을 나타낼 수 있습니다. Firefox 및 IE8 +에서 작동합니다. 산뜻한.

하지만 Google 크롬에는 하이픈이 표시되지 않습니다! 그것은 단어를 깨지 만 대시는 없습니다. hyphens CSS 속성을 지원하지 않지만 일반적으로 ­을 지원합니다.

하지만 CSS 스타일을 제거하고로드시 ­을 추가하는 자바 스크립트를 작성했습니다. jQuery를 사용하여 .append과 .after을 모두 시도했습니다. 나는 심지어 innerHTML += '­'을 시도했다. 그들 중 누구도 일하지 않는다! 얼마나 실망 스럽습니까 ...

어떻게 해결할 수 있습니까?

Answer 1

이 질문을 작성하는 동안 해결책을 찾았습니다.

­은 바로 뒤에 다른 문자가있는 경우에만 Chrome에서 작동하는 것 같습니다 (및 앞에 있음). 위의 문제는 ­ 문자가 항상 태그 내의 마지막 문자라는 것입니다. 그래서 나는 공간을 추가하고 그 공간을 CSS로 닫았다. 불행히도 이것은 CSS 의사 요소와 작동하지 않기 때문에 여전히 자바 스크립트가 필요합니다.

공간을 추가하면 Internet Explorer 및 Firefox에서 작동이 중지되므로 브라우저 검색을 사용해야했습니다.

$(".shy").each(function(){ 
    this.innerHTML += '­ '; // add the soft hyphen (for all browsers) 

    // Only Chrome has an issue 
    if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) { 
     this.innerHTML += ' '; // add a space 
     $(this).css('margin-right', '-.26em'); // close the gap from the space 
    } 
}); 

이 같이 사용하는 ( 을 사용하면 파이어 폭스에서 작동하게,하지만 IE) :

<span class="shy">communi</span>cation