Як запобігти розриву рядків у дефісах у всіх браузерах

У нас є ckeditor на нашій CMS. Наші кінцеві користувачі введуть кілька довгих статей через цей 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;