Como evitar quebras de linha em hífens em todos os navegadores

Temos um ckeditor em nosso CMS. Nossos usuários finais irão inserir alguns artigos longos por meio desse ckeditor. Precisamos de uma maneira de evitar quebras de linha em hífens nesses artigos.

Existe alguma maneira de evitar quebra de linha em hífens em todos os navegadores?

ou o ckeditor tem uma opção para evitar isso?

Receio que não haja maneira mais simples de fazer isso de forma confiável do que dividir o texto em “palavras” (sequências de caracteres não-espaços em branco separados por espaços em branco) e envolver cada “palavra” que contém um hífen dentro da nobrmarcação. Portanto, dados de entrada como bla bla foo-bar bla blaseriam transformados bla bla <nobr>foo-bar</nobr> bla bla.

Você pode até considerar a inserção de nobrmarcação sempre que a “palavra” contiver qualquer coisa, exceto letras e dígitos. A razão é que alguns navegadores podem até quebrar strings como “2/3” ou “f (0)” (veja minha página sobre estranhezas de quebra de linha em navegadores ).

Você pode usar o ‑ qual é um Unicode NON-BREAKING HYPHEN (U + 2011).

HTML: ‑ou‑

Consulte também: http://en.wikipedia.org/wiki/Hyphen#In_computing

Uma solução poderia ser usar uma spantag extra e a white-spacepropriedade CSS. Basta definir uma classe como esta:

.nowrap {
    white-space: nowrap;
}

Em seguida, adicione um intervalo com essa classe ao redor do texto hifenizado.

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

Essa abordagem deve funcionar bem em todos os navegadores - as implementações com erros listadas aqui são para outros valores da white-spacepropriedade: http://reference.sitepoint.com/css/white-space#compatibilitysection

Você não consegue fazer isso sem editar cada instância HTML. Consequentemente, escrevi alguns JS para substituí-los:

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;
}

Use o caractere de junção de palavra ( ⁠) ao redor do hífen. Também funciona no IE.

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

consertar hifens específicos ...

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

ou tudo ...

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

Experimente este CSS:

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