Comment éviter les sauts de ligne au niveau des tirets sur tous les navigateurs

Nous avons un ckeditor sur notre CMS. Nos utilisateurs finaux entreront de longs articles via cet éditeur. Nous avons besoin d'un moyen d'empêcher les sauts de ligne au niveau des tirets sur ces articles.

Existe-t-il de toute façon pour éviter les sauts de ligne aux tirets sur tous les navigateurs?

ou ckeditor a-t-il une option pour empêcher cela?

J'ai peur qu'il n'y ait pas de moyen plus simple de le faire de manière fiable que de diviser le texte en «mots» (séquences de caractères non blancs séparés par des espaces) et d'encapsuler chaque «mot» qui contient un trait d'union dans le nobrbalisage. Donc, les données d'entrée comme bla bla foo-bar bla blaseraient utilisées bla bla <nobr>foo-bar</nobr> bla bla.

Vous pouvez même envisager d'insérer un nobrbalisage chaque fois que le «mot» contient autre chose que des lettres et des chiffres. La raison en est que certains navigateurs peuvent même casser des chaînes comme «2/3» ou «f (0)» (voir ma page sur les bizarreries de saut de ligne dans les navigateurs ).

Vous pouvez utiliser ‑ qui est un Unicode NON-BREAKING HYPHEN (U + 2011).

HTML: ‑ou‑

Voir également: http://en.wikipedia.org/wiki/Hyphen#In_computing

Une solution pourrait être d'utiliser une spanbalise supplémentaire et la white-spacepropriété CSS. Définissez simplement une classe comme celle-ci:

.nowrap {
    white-space: nowrap;
}

Et puis ajoutez une étendue avec cette classe autour de votre texte coupé.

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

Cette approche devrait fonctionner correctement dans tous les navigateurs - les implémentations de bogues répertoriées ici sont pour d'autres valeurs de la white-spacepropriété: http://reference.sitepoint.com/css/white-space#compatibilitysection

Vous ne pouvez pas le faire sans modifier chaque instance HTML. Par conséquent, j'ai écrit quelques JS pour les remplacer:

jQuery:

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

Vanille JS:

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

Utilisez le caractère de menuisier mot ( ⁠) autour du tiret. Cela fonctionne également dans IE.

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

corriger des traits d'union spécifiques ...

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

ou tout ...

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

Essayez ce CSS:

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