Добавить мягкие дефисы в CMS: заставить его работать в Chrome

Question

­ замечательно, особенно потому, что он работает во всех популярных браузерах. Вы помещаете это в середине слова, которое сообщает браузеру, что слово может быть сломанным в этом месте. Если он там сломается, появляется дефис. Если это не так, символ остается невидимым.

Но это не так просто для использования авторами контента: вам нужно зайти в HTML, чтобы добавить его. Даже если вы можете добавить в CMS, вы не можете видеть, где он находится, как только вы его вставили.

Итак, я пошел вперед и объявил встроенный стиль в моей CMS для моих авторов. Они могут выбрать часть слова, например <span class="shy">communi</span>cation, а затем правило css волшебным образом добавит ­ с использованием псевдоэлемента ! И с некоторыми CMS-специфическими CSS я могу дать этому тегу пунктирное подчеркивание, чтобы показать, что у него есть один из этих мягких дефисов. Работает в Firefox и IE8 +. Ухоженная.

Но дефис не отображается в Google Chrome! Это сломает слово, но нет тире. Я знал, что он не поддерживает свойство css hyphens, но он обычно поддерживает ­.

Но все в порядке, поэтому я удалил стиль css и написал javascript для добавления ­ при загрузке. Используя jQuery, я попробовал как .append, так и .after. Я даже попробовал innerHTML += '­'. Никто из них не работает! Как неутешительно ...

Как обойти это?

Answer 1

Я придумал решение при написании этого вопроса.

­, похоже, работает в Chrome только если есть другой знак сразу после этого (и перед этим). Вышеупомянутый вопрос заключается в том, что символ ­ всегда является последним в теге. Поэтому я добавил пробел, а затем закрыл это пространство с помощью css. К сожалению, это не работает с псевдо-элементом css, поэтому мне все еще нужен javascript.

Мне нужно было использовать обнаружение браузера, потому что добавление пространства заставило его перестать работать в Internet Explorer и Firefox. (С использованием   делает его работу в Firefox, но не IE)

$(".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 
    } 
}); 

Чтобы использовать так:

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