Wie man ein Wort nach einem Sonderzeichen wie Bindestrichen (-) bricht

73

Bei einem relativ einfachen CSS:

div {
  width: 150px;
}

<div>
  12333-2333-233-23339392-332332323
</div>

Erweitern Sie das Snippet

Wie mache ich es so , dass die Zeichenfolge Aufenthalte die Zwänge width von 150 , und Packungen in eine neue Zeile auf dem Bindestrich ?

html css text

— Karl Seguin
quelle

1

Hat das für dich funktioniert? Ich habe dies in Firefox versucht und es entfernt den Bindestrich vollständig ...

— Chris Marasti-Georg

1

"dies" bedeutet das

— Update

@ ChrisMarasti-Georg: Während ich tippe, gibt es sechs Korrekturen.

— Hippietrail

Großer Beitrag: kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css

— vsync

72

Ersetzen Sie Ihre Bindestriche durch:

&shy;

Es wird ein "weicher" Bindestrich genannt.

div {
  width: 150px;
}

<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

Erweitern Sie das Snippet

— Ryan Fox
quelle

35

... und es wird nicht im Display angezeigt, es sei denn, es liegt tatsächlich eine Unterbrechung vor. Es ist also nicht gut, wenn der Bindestrich immer angezeigt werden soll.

— Chris Marasti-Georg

1

Ich habe mich über die Browserkompatibilität von gewundert . Laut Quirksmode (siehe Kompatibilitätstabelle) funktioniert dies gut, wobei die einzigen Probleme in älteren Browsern wie FF2 und IE5.5-6 auftreten.

— evanrmurphy

32

In allen modernen Browsern ^* (und auch in einigen älteren Browsern ) ist das <wbr>Element das perfekte Werkzeug, um lange Wörter an bestimmten Stellen zu brechen.

Um aus diesem Link zu zitieren:

Das <wbr>HTML-Element " Word Break Opportunity ( )" stellt eine Position innerhalb von Text dar, an der der Browser optional eine Zeile unterbrechen kann, obwohl seine Zeilenumbruchregeln an dieser Stelle sonst keine Unterbrechung verursachen würden.

So könnte es im Beispiel des OP verwendet werden (oder bei JSFiddle in Aktion sehen ):

<div style="width: 150px;">
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

^* Ich habe es in IE9, IE10 und den neuesten Versionen von Chrome, Firefox, Opera und Safari getestet.

div {
  width: 150px;
}

<div>
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

Erweitern Sie das Snippet

— aeskr
quelle

17

Als Teil von CSS3 wird es noch nicht vollständig unterstützt, aber Informationen zum Zeilenumbruch finden Sie hier . Eine weitere Option ist das wbr-Tag & schüchtern; und & # 8203; Keiner davon wird vollständig unterstützt.

— John Downey
quelle

4

Denn der Rekord word-wrap: break-word;bricht nicht am Bindestrich in Firefox (getestet in v11)

— Tim Abell

8

Ihr Beispiel funktioniert wie erwartet in Google Chrome, Safari (Windows) und IE8. Der Text wird in Firefox 3 und Opera 9.5 aus dem 150-Pixel-Feld entfernt.

Außerdem funktioniert es für Ihr Beispiel nicht, da es auch:

arbeiten, wenn das Wort bricht, aber wenn das Wort nicht bricht, werden keine Bindestriche angezeigt, oder
Arbeiten Sie, wenn Sie keine Wörter brechen, aber zeigen Sie beim Brechen zwei Bindestriche an, da bei einer Unterbrechung ein Bindestrich hinzugefügt wird.

— Dave Rutledge
quelle

8

In diesem speziellen Fall (in dem Ihre Zeichenfolge Bindestriche enthalten soll) würde ich den Text auf diese Serverseite umwandeln:

<div style="width:150px;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>

Erweitern Sie das Snippet

— Peter T. LaComb Jr.
quelle

4

Das sollte doch keinen Unterschied machen, oder? Oder es sei denn, Sie legen diese Spannweiten auf Nowrap.

— Zorf

7

Je nachdem , was Sie genau sehen möchten, können Sie eine Kombination aus verwenden hyphen, soft hyphenund / oder zero width space.

Bei einem weichen Bindestrich kann Ihr Browser Wörter unterbrechen (Hinzufügen eines Bindestrichs). In einem Bereich mit einer Breite von Null kann Ihr Browser Wörter unterbrechen (ohne etwas hinzuzufügen).

Wenn Ihr Code also so etwas wie:

111111222222-333333444444-555555

dann zeigt Ihr Browser dies ohne Wortumbruch an:

1111112222222-33333334444444-5555555

und das wird jeder mögliche Wortumbruch:

111111-
222222-
-333.333
444444-
555555

Wählen Sie einfach die gewünschte Option aus. In Ihrem Fall kann es sich um eine zwischen 4 und 5 Sekunden handeln.

— Orion
quelle

Achten Sie auf Browser-Inkompatibilitäten. Siehe die Kompatibilitätstabelle hier: quirksmode.org/oddsandends/wbr.html

— Tim Abell

Nur eine Anmerkung, ist hier bei weitem die bessere Option. Alle anderen unterbrechen beispielsweise das Kerning von Schrifttexten.

— Marius

2

Sie können auch verwenden:

word-break:break-all;

Ex.

<div style='width:10px'>ababababababbabaabababababababbabababa</div>

Ausgabe:

abababababa
ababababbba
abbabbababa
ababb

Wortumbruch ist das Umbrechen des gesamten Wortes oder der gesamten Zeile, auch wenn im Satz kein Leerzeichen vorhanden ist, das nicht in der angegebenen Breite oder Höhe angezeigt wird. Mutter dafür müssen Sie eine Breite oder Höhe angeben.

— Ajay Gupta
quelle

0

Der nicht brechende Bindestrich funktioniert gut.

HTML-Entität (dezimal)

&#8209;

— Marcus Hoelscher
quelle

0

Anstelle von können -Sie &hyphen;oder verwenden \u2010.

Stellen Sie außerdem sicher, dass die CSS-Eigenschaft für Bindestriche nicht auf none festgelegt wurde (der Standardwert ist manuell ).

<wbr>wird von Internet Explorer nicht unterstützt .

— Objekt
quelle

0

Hoffe das kann helfen

Verwenden <br>Sie das Tag (break), an dem Sie die Linie unterbrechen möchten.

— Mohammed Wahed Khan
quelle

0

Sie können nach dem Bindestrich ein Leerzeichen mit einer Breite von 0 verwenden:

div {
  width: 150px;
}

<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>

Erweitern Sie das Snippet

Wenn Sie vor dem Bindestrich einen Zeilenumbruch wünschen, verwenden Sie -stattdessen.

— jcubic
quelle