Cómo evitar saltos de línea en guiones en todos los navegadores

Tenemos un ckeditor en nuestro CMS. Nuestros usuarios finales ingresarán algunos artículos largos a través de ese ckeditor. Necesitamos una forma de evitar saltos de línea en los guiones en esos artículos.

¿Existe alguna forma de evitar saltos de línea en guiones en todos los navegadores?

¿O ckeditor tiene una opción para evitarlo?

Me temo que no hay forma más sencilla de hacerlo de manera confiable que dividir el texto en "palabras" (secuencias de caracteres que no son espacios en blanco separados por espacios en blanco) y envolver cada "palabra" que contiene un guión dentro del nobrmarcado. Entonces, los datos de entrada como bla bla foo-bar bla blase convertirían en bla bla <nobr>foo-bar</nobr> bla bla.

Incluso podría considerar insertar nobrmarcas siempre que la "palabra" contenga cualquier cosa menos letras y dígitos. La razón es que algunos navegadores pueden incluso romper cadenas como “2/3” o “f (0)” (consulte mi página sobre las rarezas de los saltos de línea en los navegadores ).

Puede usar el ‑ que es un GUIÓN SIN ROMPIMIENTO Unicode (U + 2011).

HTML: ‑o‑

Ver también: http://en.wikipedia.org/wiki/Hyphen#In_computing

Una solución podría ser utilizar una spanetiqueta adicional y la white-spacepropiedad CSS. Simplemente defina una clase como esta:

.nowrap {
    white-space: nowrap;
}

Y luego agregue un intervalo con esa clase alrededor de su texto con guiones.

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

Este enfoque debería funcionar bien en todos los navegadores; las implementaciones con errores que se enumeran aquí son para otros valores de la white-spacepropiedad: http://reference.sitepoint.com/css/white-space#compatibilitysection

No puede hacerlo sin editar cada instancia de HTML. En consecuencia, escribí algunos JS para reemplazarlos:

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

Utilice la palabra carácter de unión ( ⁠) alrededor del guión. También funciona en IE.

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

corregir guiones específicos ...

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

o todo ...

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

Prueba este CSS:

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