Kein Zeilenumbruch nach einem Bindestrich

340

Ich möchte -von Fall zu Fall einen Zeilenumbruch nach einem Bindestrich verhindern , der mit allen Browsern kompatibel ist.

Beispiel:

Ich habe diesen Text: 3-3/8"Was in HTML ist das: 3-3/8”

Das Problem ist, dass am Ende einer Zeile aufgrund des Bindestrichs die nächste Zeile unterbrochen und umgebrochen wird, anstatt sie wie ein vollständiges Wort zu behandeln ...

3-
3/8"

Ich habe versucht, das Zeichen "Null Breite ohne Unterbrechung" einzufügen , ohne Glück ...

3-3/8”

Ich sehe dies in Safari und denke, dass es in allen Browsern gleich sein wird.

Das Folgende ist meine doctypeund Zeichencodierung ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Kann ich verhindern, dass diese nach dem Bindestrich unterbrochen werden? Ich brauche keine Lösung, die für die gesamte Seite gilt ... nur etwas, das ich nach Bedarf einfügen kann, wie ein "Null-Breite-No-Break-Zeichen", außer einem, das funktioniert.

Hier ist eine Demo. Machen Sie den Rahmen einfach schmaler, bis die Linie am Bindestrich bricht.

http://jsfiddle.net/RagKH/

html css character-encoding line-breaks hyphenation Sparky
quelle
@ EricLeschinski, das wurde bereits als Antwort gepostet: stackoverflow.com/a/12362315/594235
Sparky
Mit charset = utf-8 können Sie - einen nicht brechenden Bindestrich
QuentinUK
@ QuentinUK, richtig ... ist das nicht schon die akzeptierte Antwort? &#8209;ist ein nicht brechender Bindestrich.
Sparky
& # 8209; ist gewöhnliches ASCII, daher ist utf-8 nicht erforderlich. Mit einer utf-8-Codierung der Seite ist es möglich, die tatsächlichen Zeichen einzugeben. - ist nicht das gleiche Zeichen wie - obwohl es gleich aussieht.
QuentinUK
Der richtige HTML-Code für das, was Sie geschrieben haben, wäre 3-3/8&Prime;oder 3-3/8&#x2033;. Zitate sind keine Primzahlen. Wenn Sie es in reinem ASCII möchten, verwenden Sie stattdessen gerade doppelte Anführungszeichen ( &#x22;). Wenn es als guter, lesbarer Text dargestellt werden soll, verwenden Sie vorzugsweise 3<span style="font-variant: diagonal-fractions">3/8</style>&Prime;"3⅜"
Canned Man

Antworten:

579

Versuchen Sie es mit dem nicht unterbrechenden Bindestrich &#8209;. Ich habe den Bindestrich durch diesen Charakter in Ihrer jsfiddle ersetzt, den Rahmen so klein wie möglich verkleinert, und die Linie teilt sich dort nicht mehr.

CanSpice
quelle
10
Ich dachte, es wäre so etwas wie ein nicht brechender Raum, also suchte ich nur nach "nicht brechendem Strich" und landete hier . :-)
CanSpice
Ahhh ... Ich habe eine "No-Break-Charakter" -Suche durchgeführt und damit die Wand getroffen &#65279;. Mir ist einfach nie in den Sinn gekommen, dass es einen eigenständigen Bindestrich gibt, der nicht kaputt geht.
Sparky
6
In IE8 / 9 wird dieses Zeichen länger als ein typischer Bindestrich gerendert. Es scheint die gleiche Größe wie ein Bindestrich zu haben.
Mrtsherman
21
Der Grund, warum das Ergebnis von einem normalen Bindestrich abweichen kann, ist, dass viele Schriftarten den nicht unterbrechenden Bindestrich nicht enthalten. Dadurch werden Browser gezwungen, eine andere Schriftart zu verwenden. Obwohl der nicht unterbrechende Bindestrich in dieser Schriftart dem normalen Bindestrich entspricht , gibt es keine Garantie dafür, dass er mit einem normalen Bindestrich aus einer anderen Schriftart übereinstimmt.
Jukka K. Korpela
5
Ich denke, Debs Antwort ist die beste.
Ray Cheng
256

Sie können den entsprechenden Text auch mit umbrechen

<span style="white-space: nowrap;"></span>
Deb
quelle
17
Ja, dies ist eine bessere Antwort als die akzeptierte imho. Danke @Deb.
CMH
38
@CMH Dies hilft nicht, wenn Sie Leerzeichen einschließen möchten (leere Stellen, an denen der Benutzer Leerzeichen sieht - nichts), aber keine Wörter mit Bindestrichen teilen möchten, z. B. das Wort "E-Mail". Akzeptierte Antwort hilft in diesem Fall
xmojmr
12
In diesem Fall können Sie span nur um "E-Mail" verwenden.
Guirto
3
@CMH, das ist eine gute Antwort, die auch funktioniert, also habe ich sie hochgestimmt. Ich habe mich jedoch entschieden, diese Antwort nicht zu akzeptieren, da ich nach einem Zeichen gefragt habe, das nicht automatisch in die nächste Zeile übergeht. Die Tatsache, dass ein "nicht brechender Bindestrich" ( &#8209;) in bestimmten Browsern möglicherweise etwas länger als ein normaler Bindestrich ist, war für mich trivial.
Sparky
11
@Sparky Ein Problem bei der Verwendung verschiedener Zeichen besteht darin, dass die Suchergebnisse durcheinander gebracht werden. Wenn Sie versuchen, "3-3 / 8" auf der Seite zu finden, wird der nicht unterbrechende Bindestrich nicht gefunden.
Herr Lister
23

IE8 / 9 macht den in CanSpices Antwort erwähnten nicht unterbrechenden Bindestrich länger als einen typischen Bindestrich. Es ist die Länge eines Bindestrichs anstelle eines typischen Bindestrichs. Dieser Anzeigeunterschied war für mich ein Deal Breaker.

Da ich die von Deb angegebene CSS-Antwort nicht verwenden konnte, entschied ich mich stattdessen für die Verwendung von No-Break-Tags.

<nobr>e-mail</nobr>

Außerdem habe ich ein bestimmtes Szenario gefunden, bei dem IE8 / 9 in einem Bindestrich unterbrochen wurde.

  • Eine Zeichenfolge enthält Wörter, die durch nicht unterbrechende Leerzeichen getrennt sind. &nbsp;
  • Die Breite ist begrenzt
  • Enthält einen Bindestrich

IE macht es so.

Beispiel für das Brechen eines Bindestrichs in IE8 / 9

Der folgende Code gibt das oben abgebildete Problem wieder. Ich musste ein Meta-Tag verwenden, um das Rendern in IE9 zu erzwingen, da IE10 das Problem behoben hat. Keine Geige, da es keine Meta-Tags unterstützt.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <meta charset="utf-8"/>
        <style>
            body { padding: 20px; }
            div { width: 300px; border: 1px solid gray; }
        </style>
    </head>
    <body>
        <div>      
            <p>If&nbsp;there&nbsp;is&nbsp;a&nbsp;-&nbsp;and&nbsp;words&nbsp;are&nbsp;separated&nbsp;by&nbsp;the&nbsp;whitespace&nbsp;code&nbsp;&amp;nbsp;&nbsp;then&nbsp;IE&nbsp;will&nbsp;wrap&nbsp;on&nbsp;the&nbsp;dash.</p>
        </div>
    </body>
</html>
mrtsherman
quelle
6
Die Verwendung nobrist die browserübergreifendste Methode und funktioniert unabhängig von Schriftarten und CSS. Das nobrElement ist nicht in HTML-Spezifikationen definiert, dies sollte jedoch nur als Formalität betrachtet werden. Wenn Sie jedoch nach HTML-Spezifikationen schreiben müssen , ist Debs Antwort mit CSS die beste Option.
Jukka K. Korpela
5
Ich bin gespannt, warum Sie die CSS-Lösung nicht verwenden konnten.
Ryan Ahearn
2
@ RyanAhearn - Ich verwende ein Tool eines Drittanbieters, mit dem ich nicht viel Kontrolle über HTML habe. Inline-Tag-Deklarationen werden nicht unterstützt.
Mrtsherman
Könnten Sie anstelle von '<nobr>' nicht einfach eine Spanne mit einer Klasse verwenden und diese mithilfe des CSS steuern?
StephenESC
1
Beachten Sie, dass das nobrTag nicht dem Standard entspricht und jederzeit beschädigt werden kann. In der MDN-Dokumentation wird nicht empfohlen, dieses Tag zu verwenden: developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr
Philipp
16

Sie können dies auch "auf Joiner-Art" tun, indem Sie " Word Joiner " einfügenU+2060 " .

Wenn dies Accept-Charsetzulässig ist, kann das Unicode-Zeichen selbst direkt eingefügt werden in die HTML-Ausgabe .

Andernfalls kann die Entitätscodierung verwendet werden. ZB um den Text zu verbinden red-brown, zu verwenden:

red-&#x2060;brown

oder (Dezimaläquivalent):

red-&#8288;brown

. Ein weiteres verwendbares Zeichen ist " U+FEFFZero Width No-Break Space " [⁠ ⁠1] :

red-&#xfeff;brown

und (Dezimaläquivalent):

red-&#65279;brown

[1] : Beachten Sie, dass diese Methode zwar in gängigen Browsern wie Chrome funktioniert, jedoch seit Unicode 3.2 veraltet ist .

Vergleich von "The Joiner Way" mit " U+2011Non-Breaking Hyphen ":

  • Das Wort Joiner kann für alle anderen Zeichen verwendet werden, nicht nur für Bindestriche.

  • Bei Verwendung des Word Joiners wird der Text von den meisten Renderern identisch gerastert . In Chrome, FireFox, IE und Opera wird das Rendern normaler Bindestriche ausgeführt, z.

    abcdefghijklmnopqrstu-vwxyz

    ist identisch mit dem Rendern normaler Bindestriche (mit U + 2060 Word Joiner), z.

    a-⁠b-⁠c-⁠d-⁠e-⁠f-⁠g-⁠h-⁠i-⁠j-⁠k-⁠l-⁠m-⁠n-⁠o-⁠p-⁠q- ⁠R-⁠s-⁠t-⁠u-⁠v-⁠w-⁠x-⁠y-⁠z

    während sich die obigen zwei Darstellungen von der Darstellung von " Non-Breaking Hyphen " unterscheiden, z.

    a-b-c-d-e-f-g-h-i-j-k-l-m-n-o-p-q-r-s-t-u-v-w-x-y-y z

    . (Das Ausmaß des Unterschieds ist arialbrowser- und schriftabhängig . Wenn Sie beispielsweise eine Schriftartdeklaration von " " verwenden, weisen Firefox und IE11 relativ große Unterschiede auf, während Chrome und Opera kleinere Abweichungen aufweisen.)

Vergleich von "The Joiner Way" mit <span class=c1></span>(CSS .c1 {white-space:nowrap;}) und <nobr></nobr>:

  • Das Wort Joiner kann für Situationen verwendet werden, in denen die Verwendung von HTML-Tags eingeschränkt ist, z. B. Formen von Websites und Foren.

  • In Bezug auf Präsentation und Inhalt wird die Mehrheit das Wort Joiner im Vergleich zu Tags als näher am Inhalt betrachten.

• Wie unter Windows 8.1 Core 64-Bit getestet mit:
    • IE 11.0.9600.18205
    • Firefox 43.0.4
    • Chrome 48.0.2564.109 (offizieller Build) m (32-Bit)
    • Opera 35.0.2066.92

Pacerier
quelle
Es scheint, dass "U + FEFF Zero Width No-Break Space" in IE11 nicht richtig funktioniert.
Ivan Gusev
Es scheint, dass "U + 2060" nicht funktioniert, wenn auf "-" ein Unicode-Zeichen folgt: sobingo-&#8288;bongo
Ivan Gusev
Trotz der ständigen negativen Presse&#xfeff;
James Wilson
6

Spät zur Party, aber ich denke, das ist eigentlich das eleganteste. Verwenden Sie das Unicode-Zeichen WORD JOINER & # 8288 ; auf jeder Seite Ihres Bindestrichs oder Strichs oder eines beliebigen Zeichens.

Also, wie so:

&#8288;—&#8288;

Dadurch wird das Symbol an beiden Enden mit seinen Nachbarn verbunden (ohne ein Leerzeichen hinzuzufügen) und ein Zeilenumbruch verhindert.

Eckstein
quelle
Ich konnte dies aus irgendeinem Grund unter Windows 10 mit ALT + 0173 (weicher Bindestrich) zum
Laufen bringen