Come prevenire l'interruzione di riga ai trattini su tutti i browser

Abbiamo un ckeditor sul nostro CMS. I nostri utenti finali inseriranno alcuni articoli lunghi tramite quel ckeditor. Abbiamo bisogno di un modo per evitare l'interruzione di riga ai trattini su quegli articoli.

Esiste comunque per prevenire l'interruzione di riga ai trattini su tutti i browser?

o ckeditor ha un'opzione per impedirlo?

Temo che non ci sia modo più semplice per farlo in modo affidabile che dividere il testo in "parole" (sequenze di caratteri non di spazi separati da spazi) e racchiudere ogni "parola" che contiene un trattino all'interno del nobrmarkup. Quindi i dati di input come bla bla foo-bar bla blasarebbero rivolti a bla bla <nobr>foo-bar</nobr> bla bla.

Potresti anche prendere in considerazione l'inserimento di nobrmarkup ogni volta che la "parola" contiene qualsiasi cosa tranne lettere e cifre. Il motivo è che alcuni browser possono persino interrompere stringhe come "2/3" o "f (0)" (vedere la mia pagina sulle stranezze delle interruzioni di riga nei browser ).

È possibile utilizzare ‑ un Unicode NON-BREAKING HYPHEN (U + 2011).

HTML: ‑o‑

Vedi anche: http://en.wikipedia.org/wiki/Hyphen#In_computing

Una soluzione potrebbe essere quella di utilizzare un spantag aggiuntivo e la white-spaceproprietà CSS. Basta definire una classe come questa:

.nowrap {
    white-space: nowrap;
}

E poi aggiungi un intervallo con quella classe intorno al testo con trattino.

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

Questo approccio dovrebbe funzionare perfettamente in tutti i browser: le implementazioni con bug elencate qui sono per altri valori della white-spaceproprietà: http://reference.sitepoint.com/css/white-space#compatibilitysection

Non puoi farlo senza modificare ogni istanza HTML. Di conseguenza, ho scritto alcuni JS per sostituirli:

jQuery:

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

Vaniglia JS:

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

Utilizza la parola carattere falegname ( ⁠) attorno al trattino. Funziona anche in IE.

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

correggere trattini specifici ...

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

o tutto ...

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

Prova questo CSS:

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