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

Question

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 el salto de línea en los guiones de esos artículos.

¿Hay alguna forma de evitar el salto de línea en guiones en todos los navegadores?

o tiene ckeditor una opción para evitar eso?

Answer 1

Me temo que no hay forma más simple de hacerlo fiable que la división el texto a "palabras" (secuencias de caracteres no blancos separados por espacios en blanco) y envolviendo cada "palabra" que contiene un guion dentro del marcado nobr. Por lo tanto, los datos de entrada como bla bla foo-bar bla bla se convertirán en bla bla <nobr>foo-bar</nobr> bla bla.

Incluso podría considerar insertar el marcado nobr siempre que la "palabra" contenga algo más que letras y dígitos. La razón es que algunos navegadores incluso pueden romper cadenas como "2/3" o "f (0)" (vea mi página en oddities of line breaking in browsers).

Answer 2

You can use‑ que es un Unicode INCREÍBLE HYPHEN (U + 2011).

HTML: ‑ o ‑

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

Answer 3

Una solución podría ser el uso de una etiqueta de span extra y la propiedad white-space CSS. Basta con definir una clase como esta:

.nowrap { 
    white-space: nowrap; 
} 

Y a continuación, añadir un lapso con esa clase alrededor de su texto dividido.

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

Este enfoque debería funcionar bien en todos los navegadores - los defectos de implementación enumeradas aquí son para otros valores de la propiedad white-space: http://reference.sitepoint.com/css/white-space#compatibilitysection

Answer 4

probar esto

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

Answer 5

Usted no puede hacerlo sin necesidad de editar cada instancia 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, '‑')); 

vainilla JS:

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