Frage Wie verhindert man einen Zeilenumbruch bei Bindestrichen in allen Browsern?


Wir haben einen Ckeditor auf unserem CMS. Unsere Endanwender werden einige lange Artikel über diesen Editor eingeben. Wir brauchen einen Weg, um Zeilenumbrüche bei Bindestrichen für diese Artikel zu verhindern.

Gibt es trotzdem einen Zeilenumbruch bei Bindestrichen in allen Browsern?

Oder hat ckeditor eine Option, das zu verhindern?


75
2018-01-06 04:15


Ursprung


Antworten:


Ich fürchte, es gibt keinen einfacheren Weg, dies zuverlässig zu tun, als den Text in "Wörter" aufzuteilen (Sequenzen von Nicht-Leerraum-Zeichen, die durch Leerzeichen getrennt sind) und jedes "Wort", das einen Bindestrich enthält, zu umhüllen nobr Markup. Also Eingabedaten wie bla bla foo-bar bla bla würde sich wenden bla bla <nobr>foo-bar</nobr> bla bla.

Sie könnten sogar in Erwägung ziehen, einzufügen nobr Markup, wenn das "Wort" nichts als Buchstaben und Ziffern enthält. Der Grund dafür ist, dass manche Browser auch Strings wie "2/3" oder "f (0)" unterbrechen können (siehe meine Seite auf Seltsamkeiten von Zeilenumbrüchen in Browsern).


41
2018-01-06 08:12



Sie können verwenden   Das ist ein Unicode-Non-Breaking-Hyphen (U + 2011).

HTML: &#x2011; oder &#8209;

Siehe auch: http://en.wikipedia.org/wiki/Hyphen#In_computing


200
2018-01-06 04:18



Eine Lösung könnte sein, ein Extra zu verwenden span Tag und die white-space CSS-Eigenschaft Definieren Sie einfach eine Klasse wie folgt:

.nowrap {
    white-space: nowrap;
}

Fügen Sie dann einen Bereich mit dieser Klasse um den mit Bindestrich versehenen Text hinzu.

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

Dieser Ansatz sollte in allen Browsern problemlos funktionieren - die hier aufgeführten Buggy - Implementierungen gelten für andere Werte des white-space Eigentum: http://reference.sitepoint.com/css/white-space#compatibilitysection


64
2018-01-06 04:24



Sie können es nicht tun, ohne jede HTML-Instanz zu bearbeiten. Folglich schrieb ich ein JS, um sie zu ersetzen:

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

1
2018-04-25 19:47



Versuche dies

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

-1
2018-06-01 10:03