Pregunta Cómo evitar el salto 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 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?


75
2018-01-06 04:15


origen


Respuestas:


Me temo que no hay una forma más sencilla de hacerlo de manera confiable que dividir el texto en "palabras" (secuencias de caracteres que no sean espacios en blanco separados por espacios en blanco) y envolver cada "palabra" que contiene un guión en el interior nobr margen. Entonces ingresa datos como bla bla foo-bar bla bla se convertiría a bla bla <nobr>foo-bar</nobr> bla bla.

Incluso podría considerar insertar nobr marcado 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)" (ver mi página en rarezas de salto de línea en los navegadores)


41
2018-01-06 08:12



Puedes usar   que es un HYPHEN INCONFUNDENTE de Unicode (U + 2011).

HTML: &#x2011; o &#8209;

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


200
2018-01-06 04:18



Una solución podría ser usar un extra span etiqueta y el white-space Propiedad CSS Solo defina una clase como esta:

.nowrap {
    white-space: nowrap;
}

Y luego agregue un lapso 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 de errores que se enumeran aquí son para otros valores del white-space propiedad: http://reference.sitepoint.com/css/white-space#compatibilitysection


64
2018-01-06 04:24



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

1
2018-04-25 19:47



prueba esto

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

-1
2018-06-01 10:03