424 Stimmen

Sparky avatar

Kein Zeilenumbruch nach einem Bindestrich

Gefragt el 7 de Oktober, 2011
Wann wurde die Frage gestellt
205769 Ansichten
Anzahl der Besuche der Frage
5 Antworten
Anzahl der Fragenantworten
Gelöst
Aktueller Status der Frage

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

Ejemplo:

Ich habe diesen Text: 3-3/8" was in HTML so aussieht: 3-3/8”

Das Problem besteht darin, dass am Ende einer Zeile aufgrund des Bindestrichs ein Zeilenumbruch erfolgt, anstatt es wie ein ganzes Wort zu behandeln...

3-
3/8"

Ich habe versucht, das "Null-Breite-ohne-Umbruch-Zeichen" einzufügen,  ohne Erfolg...

3-3/8”

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

Das Folgende ist mein doctype und Zeichenkodierung...

<!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" />

Gibt es eine Möglichkeit, den Zeilenumbruch nach dem Bindestrich zu verhindern? Ich brauche keine Lösung, die für die gesamte Seite gilt... nur etwas, das ich bei Bedarf einfügen kann, wie ein "Null-Breite kein Umbruch-Zeichen", außer einer, die funktioniert.

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

http://jsfiddle.net/RagKH/

Gefragt el 7 de Oktober, 2011 von Sparky

Antworten

Zu viele Anzeigen?

678voto

CanSpice avatar
CanSpice Punkte 33288

Versuchen Sie, den Bindestrich ohne Trennzeichen zu verwenden &#8209; . Ich habe den Bindestrich durch das Zeichen in deinem jsfiddle ersetzt, den Rahmen so klein wie möglich gemacht und die Linie teilt sich dort nicht mehr.

Beantwortet el 7 de Oktober, 2011 von CanSpice (33288 Punkte )

325voto

Deb avatar
Deb Punkte 3175

Sie könnten den entsprechenden Text auch mit

<span style="white-space: nowrap;"></span>
Beantwortet el 11 de September, 2012 von Deb (3175 Punkte )

29voto

mrtsherman avatar
mrtsherman Punkte 38526

IE8/9 macht den in der Antwort von CanSpice erwähnten Bindestrich ohne Trennstrich länger als einen typischen Bindestrich. Er hat die Länge eines Bindestrichs und nicht die eines typischen Bindestrichs. Dieser Unterschied in der Darstellung war für mich ein entscheidender Faktor.

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

<nobr>e-mail</nobr>

Außerdem habe ich ein spezielles Szenario gefunden, bei dem der IE8/9 bei einem Bindestrich versagt.

  • Eine Zeichenkette enthält durch Leerzeichen getrennte Wörter - &nbsp;
  • Breite ist begrenzt
  • Enthält einen Bindestrich

Der IE stellt es so dar.

Example of hyphen breaking in IE8/9

Der folgende Code reproduziert das oben geschilderte Problem. Ich musste ein Meta-Tag verwenden, um das Rendering auf IE9 zu erzwingen, da IE10 das Problem behoben hat. Keine Fiddle, weil es nicht unterstützt Meta-Tags.

<!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>
Beantwortet el 6 de Dezember, 2012 von mrtsherman (38526 Punkte )

26voto

Pacerier avatar
Pacerier Punkte 80774

Sie können es auch auf die "Tischler-Art" machen, indem Sie " U+2060 Wortverbindungsprogramm ".

Si Accept-Charset erlaubt, kann das Unicode-Zeichen selbst direkt eingefügt in die HTML-Ausgabe.

Andernfalls kann die Entitätskodierung verwendet werden. Um z.B. den Text zu verbinden red-brown verwenden:

red-&#x2060;brown

oder (Dezimaläquivalent):

red-&#8288;brown

. Ein weiteres brauchbares Zeichen ist " U+FEFF Null Breite No-Break Space " [ 1 ] :

red-&#xfeff;brown

und (dezimal äquivalent):

red-&#65279;brown

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

Vergleich der "Tischlerart" mit " U+2011 Nicht-trennende Bindestriche ":

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

  • Bei Verwendung des Word Joiner rastern die meisten Renderer den Text identisch . In Chrome, FireFox, IE und Opera werden normale Bindestriche, z. B.:

    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

    ist identisch mit der Darstellung von normalen Bindestrichen (mit U+2060 Word Joiner), z. B.:

    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 beiden oben genannten Wiedergaben von der Wiedergabe von " Nicht-trennende Bindestriche ", z.B.:

    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

    . (Das Ausmaß des Unterschieds ist browser- und schriftartabhängig. Wenn Sie z. B. eine Schriftdeklaration von " arial ", Firefox und IE11 zeigen relativ große Abweichungen, während Chrome und Opera kleinere Abweichungen aufweisen).

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

  • Der Word Joiner kann in Situationen verwendet werden, in denen die Verwendung von HTML-Tags eingeschränkt ist, z. B. in Formularen von Websites und Foren.

  • について Spektrum von Präsentation und Inhalt Die Mehrheit der Befragten ist der Meinung, dass das Wort "joiner" im Vergleich zu "tags" näher am Inhalt ist.

- Getestet unter Windows 8.1 Core 64-bit mit:
    - DH 11.0.9600.18205
    - Firefox 43.0.4
    - Chrome 48.0.2564.109 (Official Build) m (32-bit)
    - Opera 35.0.2066.92

Beantwortet el 8 de Marsch, 2016 von Pacerier (80774 Punkte )

4voto

Toby T avatar
Toby T Punkte 61

Im Anschluss an @den's nützliche JSX-Lösung, dies funktionierte für mich:

<h2>{props.name.replace('-', '-\u2060')}</h2>
Beantwortet el 29 de Oktober, 2021 von Toby T (61 Punkte )

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

Yandex
X