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-&#65279;3/8&rdquo;

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/

— 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? ‑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″oder 3-3/8″. Zitate sind keine Primzahlen. Wenn Sie es in reinem ASCII möchten, verwenden Sie stattdessen gerade doppelte Anführungszeichen ( "). Wenn es als guter, lesbarer Text dargestellt werden soll, verwenden Sie vorzugsweise 33/8</style>″"3⅜"

— Canned Man

579

Versuchen Sie es mit dem nicht unterbrechenden Bindestrich ‑. 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 . 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" ( ‑) 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.  
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 '' 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 (CSS .c1 {white-space:nowrap;}) und :

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-⁠bongo

— Ivan Gusev

Trotz der ständigen negativen Presse

— 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