So verhindern Sie Zeilenumbrüche bei Bindestrichen in allen Browsern

104

Wir haben einen Redakteur auf unserem CMS. Unsere Endbenutzer werden über diesen ckeditor einige lange Artikel eingeben. Wir brauchen einen Weg, um Zeilenumbrüche bei Bindestrichen in diesen Artikeln zu verhindern.

Gibt es überhaupt eine Möglichkeit, Zeilenumbrüche bei Bindestrichen in allen Browsern zu verhindern?

oder hat ckeditor eine option, um das zu verhindern?

html css Alan
quelle
Sie können die akzeptierte Antwort ändern, da die aktuell akzeptierte Antwort eine veraltete Lösung enthält
anorganik

Antworten:

50

Ich fürchte, es gibt keinen einfacheren Weg, dies zuverlässig zu tun, als den Text in „Wörter“ (Sequenzen von Nicht-Leerzeichen, die durch Leerzeichen getrennt sind) aufzuteilen und jedes „Wort“, das einen Bindestrich im nobrMarkup enthält, zu verpacken . Also würden Eingabedaten wie bla bla foo-bar bla blaauf gedreht bla bla <nobr>foo-bar</nobr> bla bla.

Sie können sogar Markups einfügen, nobrwenn das „Wort“ etwas anderes als Buchstaben und Ziffern enthält. Der Grund dafür ist, dass einige Browser möglicherweise sogar Zeichenfolgen wie "2/3" oder "f (0)" unterbrechen (siehe meine Seite zu den Besonderheiten des Zeilenumbruchs in Browsern ).

Jukka K. Korpela
quelle
35
Das nobrTag ist kein Standard und wird vom W3C dringend empfohlen. Siehe w3.org/TR/html5/obsolete.html#non-conforming-features
derekerdmann
18
Im Gegensatz zu anderen Ansätzen nobrfunktioniert das Markup in allen Browsern, auch bei deaktivierten Stylesheets und unabhängig von der Unterstützung von Sonderzeichen. Gibt es ein echtes Problem damit?
Jukka K. Korpela
18
Warum nicht <span style = "white-space: nowrap"> </ span>?
Brendan Byrd
6
@ JukkaK.Korpela Das Problem dabei ist, dass moderne Browser möglicherweise die Unterstützung dafür einstellen und dies tun können, ohne die HTML-Spezifikation zu verletzen. Es ist eine "sollte" -Funktion, die nur empfohlen wird. In Bezug auf die Stylesheets, wenn ein Benutzer Stylesheets deaktiviert hat, dann erwarten sie, keine Stile zu haben
mirhagk
3
Ich habe seit 10 Jahren Websites entwickelt und wusste nicht einmal, dass Sie Stylesheets in Ihrem Browser deaktivieren KÖNNTEN. Wer macht das wirklich (abgesehen von Leuten, die sich heutzutage in ähnlicher Weise für die Selbstkennzeichnung entscheiden würden, JavaScript standardmäßig zu deaktivieren)? Wenn wir so pedantisch sein müssen, wo ist die alternative Lösung?
John Rix
274

Sie können ‑ einen Unicode NON-BREAKING HYPHEN (U + 2011) verwenden.

HTML: &#x2011;oder&#8209;

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

täuschen
quelle
4
Vielen Dank für Ihre Antwort. Wir müssen jedoch einen Zeilenumbruch auf ckeditor verhindern, bei dem der gesamte Inhalt von den Endbenutzern eingegeben wird. Wir können nicht jedem sagen, dass er einen nicht brechenden Unicode-Bindestrich eingeben soll. Gibt es eine andere Möglichkeit, Zeilenumbrüche zu verhindern? oder hat ckeditor die option, den bindestrich automatisch zu konvertieren?
Alan
9
Sie können einen einfachen String - Ersatz tun, ersetzen -mit ‑.
Täuschung
14
Beachten Sie die eingeschränkte Unterstützung von Schriftarten für U + 2011, siehe fileformat.info/info/unicode/char/2011/fontsupport.htm
Jukka K. Korpela
7
Während dies theoretisch sicherlich eleganter ist als das Verputzen von nobrTags überall, funktioniert es in der Praxis nicht sehr gut. Der IE zeigt es als Bindestrich an, Safari fügt mehr Platz um es herum als ein normaler Bindestrich hinzu, und die meisten Texteditoren zeigen es als Fragezeichen, Kästchen oder anderes bedeutungsloses Zeichen an.
Tgr
4
@jakev Ich würde mit gehen, white-space: nowrapwie von derekerdmann vorgeschlagen. Übrigens scheint unter FF / Win7 der schüchterne Bindestrich beim Kopieren und Einfügen außerhalb von Firefox in einen normalen Bindestrich umgewandelt zu werden, selbst wenn die Zielanwendung Unicode-fähig ist.
Tgr
86

Eine Lösung könnte darin bestehen, ein zusätzliches spanTag und die white-spaceCSS-Eigenschaft zu verwenden. Definieren Sie einfach eine Klasse wie diese:

.nowrap {
    white-space: nowrap;
}

Fügen Sie dann mit dieser Klasse einen Bereich um Ihren getrennten Text hinzu.

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

Dieser Ansatz sollte in allen Browsern einwandfrei funktionieren. Die hier aufgeführten fehlerhaften Implementierungen gelten für andere Werte der white-spaceEigenschaft: http://reference.sitepoint.com/css/white-space#compatibilitysection

derekerdmann
quelle
1
Vielen Dank für Ihre Antwort. Unser Textinhalt wird jedoch von den Endbenutzern über einen ckeditor eingegeben. Wir können nicht jedem sagen, dass er den <span> um das Wort hinzufügen soll. Gibt es einen anderen Weg, um dies zu erreichen? Trotzdem danke
Alan
1
@Alan - Welche Art von Inhalten fügen sie hinzu, die bei Hypens nicht brechen können? Wenn es sich um einen Titel oder ein anderes Element handelt, das immer in einer Zeile steht, gilt dies white-space: nowrapfür den gesamten Container. Ansonsten lass es einfach los; Erstens gibt es keinen Grund, Zeilenumbrüche mit Bindestrichen für allgemeine Inhalte zu verhindern, und zweitens gibt es keine Möglichkeit, automatisch das zu erreichen, wonach Sie suchen, es sei denn, Sie sind bereit, sich bei CKEditor abzuhacken.
Derekkmann
10
Es gibt viele Situationen, in denen ein Zeilenumbruch nach einem Bindestrich schlecht oder nur sehr falsch ist, wie in „F-1“ oder wenn ein Bindestrich als unäres Minus verwendet wird, wie in „-42 °“ (und die Leute verwenden ihn so). da sie nichts über das Minuszeichen wissen).
Jukka K. Korpela
Dies funktioniert, aber die Tatsache, dass es funktioniert, ist nicht intuitiv, da Bindestriche keine Leerzeichen sind. <nobr>ist viel klarer.
Dave Burton
2

Sie können dies nicht tun, ohne jede HTML-Instanz zu bearbeiten. Folglich habe ich einige JS geschrieben, um sie zu ersetzen:

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;
}
Chris Happy
quelle
1
Ich mag die Idee hier, da nicht jedes einzelne HTML-Bit bearbeitet werden muss, das möglicherweise einen Bindestrich enthält. Ich vermute jedoch, dass Sie möglicherweise auf Leistungsprobleme stoßen, wenn Sie jeden Text auf einer ganzen Seite wie diesen verarbeiten, insbesondere wenn viele Elemente vorhanden sind.
Sean the Bean
0

Verwenden Sie das Wort Joiner- Zeichen ( &#8288;) um den Bindestrich. Es funktioniert auch im IE.

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

bestimmte Bindestriche korrigieren ...

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

oder alles ...

function fixhyphens(text) {
    return text.replace(/(\S+)-(\S+)/g,'$1&#8288;-&#8288;$2'));
}
Carter Medlin
quelle
-1

Versuchen Sie dieses CSS: 

word-break: break-all; 
-webkit-hyphens:none;
-moz-hyphens: none; 
hyphens: none;
Ma Yubo
quelle
7
Während dieses Code-Snippet die Frage lösen kann, hilft eine Erklärung wirklich, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage für Leser in Zukunft beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen. Bitte versuchen Sie auch, Ihren Code nicht mit erklärenden Kommentaren zu überfüllen. Dies verringert die Lesbarkeit sowohl des Codes als auch der Erklärungen!
Ashish Ahuja