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

Bei einem relativ einfachen CSS:

div {
  width: 150px;
}

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

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

Ersetzen Sie Ihre Bindestriche durch:

­

Es wird ein "weicher" Bindestrich genannt.

div {
  width: 150px;
}

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

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>

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.

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.

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>

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:

111111­222222­-333333​444444-​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.

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.

Der nicht brechende Bindestrich funktioniert gut.

HTML-Entität (dezimal)

‑

Anstelle von können -Sie ‐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 .

Hoffe das kann helfen

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

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>

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