Jak zapobiegać łamaniu linii w łącznikach we wszystkich przeglądarkach

Mamy ckeditor w naszym CMS. Nasi użytkownicy końcowi będą wprowadzać długie artykuły za pośrednictwem tego ckeditor. Potrzebujemy sposobu, aby zapobiec łamaniu linii w łącznikach w tych artykułach.

Czy w ogóle istnieje możliwość zapobiegania łamaniu linii w łącznikach we wszystkich przeglądarkach?

czy ckeditor ma opcję, aby temu zapobiec?

Obawiam się, że nie ma prostszego sposobu na zrobienie tego niezawodnie niż podzielenie tekstu na „słowa” (sekwencje znaków niebędących białymi znakami oddzielone spacjami) i zawijanie każdego „słowa”, które zawiera łącznik wewnątrz nobrznacznika. Więc dane wejściowe, takie jak bla bla foo-bar bla blazostałyby zwrócone bla bla <nobr>foo-bar</nobr> bla bla.

Możesz nawet rozważyć wstawienie nobrznaczników, ilekroć „słowo” zawiera wszystko oprócz liter i cyfr. Powodem jest to, że niektóre przeglądarki mogą nawet łamać ciągi znaków, takie jak „2/3” lub „f (0)” (zobacz moją stronę dotyczącą dziwnych przypadków łamania linii w przeglądarkach ).

Możesz użyć ‑ ŁĄCZNIKA NIEŁAMANIAJĄCEGO Unicode (U + 2011).

HTML: ‑lub‑

Zobacz także: http://en.wikipedia.org/wiki/Hyphen#In_computing

Jednym z rozwiązań mogłoby być użycie dodatkowego spantagu i white-spacewłaściwości CSS. Po prostu zdefiniuj taką klasę:

.nowrap {
    white-space: nowrap;
}

A następnie dodaj rozpiętość z tą klasą wokół dzielonego tekstu.

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

To podejście powinno działać dobrze we wszystkich przeglądarkach - wymienione tutaj błędne implementacje dotyczą innych wartości white-spacewłaściwości: http://reference.sitepoint.com/css/white-space#compatibilitysection

Nie możesz tego zrobić bez edycji każdej instancji HTML. W konsekwencji napisałem trochę JS, aby je zastąpić:

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

Użyj znaku łącznika słowa ( ⁠) wokół łącznika. Działa również w IE.

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

popraw określone łączniki ...

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

albo wszystko ...

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

Wypróbuj ten CSS:

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