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

Ответ 1

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

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

Ответ 2

Вы можете использовать ‑, который является Unicode NON-BREAKING HYPHEN (U + 2011).

HTML: ‑ или ‑

Смотрите также: http://en.wikipedia.org/wiki/Hyphen#In_computing

Ответ 3

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

.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

Ответ 4

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

JQuery

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

Vanilla JS:

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

Ответ 5

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

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