Как предотвратить перенос строки через дефис во всех браузерах

На нашей CMS есть ckeditor. Наши конечные пользователи будут вводить несколько длинных статей через этот ckeditor. Нам нужен способ предотвратить перенос строки через дефис в этих статьях.

Есть ли способ предотвратить перенос строки через дефис во всех браузерах?

или у ckeditor есть возможность предотвратить это?

Боюсь, что нет более простого способа сделать это надежно, чем разделить текст на «слова» (последовательности непробельных символов, разделенных пробелами) и обернуть каждое «слово», содержащее дефис, внутри nobrразметки. Так что входные данные вроде bla bla foo-bar bla blaбы обратились bla bla <nobr>foo-bar</nobr> bla bla.

Вы можете даже подумать о вставке nobrразметки всякий раз, когда «слово» содержит что-либо, кроме букв и цифр. Причина в том, что некоторые браузеры могут даже разрывать строки вроде «2/3» или «f (0)» (см. Мою страницу о странностях разрыва строк в браузерах ).

Вы можете использовать, ‑ который является НЕПРЕРЫВНЫМ ДЕФИСОМ Unicode (U + 2011).

HTML: ‑или‑

См. Также: http://en.wikipedia.org/wiki/Hyphen#In_computing

Одним из решений может быть использование дополнительного spanтега и white-spaceсвойства CSS. Просто определите такой класс:

.nowrap {
    white-space: nowrap;
}

А затем добавьте диапазон с этим классом вокруг текста с переносом.

<p>This is the <span class="nowrap">anti-inflammable</span> model</p>

Этот подход должен отлично работать во всех браузерах - перечисленные здесь реализации с ошибками предназначены для других значений white-spaceсвойства: http://reference.sitepoint.com/css/white-space#compatibilitysection

Вы не можете сделать это без редактирования каждого экземпляра HTML. Следовательно, я написал несколько JS для их замены:

jQuery:

//replace hypens with no-breaking ones
$txt = $("#block-views-video-block h2");
$txt.text( $txt.text().replace(/-/g, '‑') );

Ванильный JS:

function nonBrHypens(id) {
    var str = document.getElementById(id).innerHTML; 
    var txt = str.replace(/-/g, '‑');
    document.getElementById(id).innerHTML = txt;
}

Используйте символ объединения слов ( ⁠) вокруг дефиса. Это работает и в IE.

https://en.wikipedia.org/wiki/Word_joiner

исправить определенные дефисы ...

function fixicecream(text) {
    return text.replace(/ice-cream/g,'ice⁠-⁠cream'));
}

или все ...

function fixhyphens(text) {
    return text.replace(/(\S+)-(\S+)/g,'$1⁠-⁠$2'));
}

Попробуйте этот CSS:

word-break: break-all; 
-webkit-hyphens:none;
-moz-hyphens: none; 
hyphens: none;