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

Question

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

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

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

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

Но все в порядке, поэтому я удалил стиль 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