Wie trenne ich Wörter mit einem Bindestrich?

StackOverflow https://stackoverflow.com/questions/904

  •  08-06-2019
  •  | 
  •  

Frage

Angesichts eines relativ einfachen CSS:

div {
  width: 150px;
}
<div>
  12333-2333-233-23339392-332332323
</div>

Wie schaffe ich es, dass die Zeichenfolge auf die beschränkt bleibt? width von 150, und einfach in eine neue Zeile am Bindestrich umbrechen?

War es hilfreich?

Lösung

Ersetzen Sie Ihre Bindestriche durch Folgendes:

&shy;

Es wird ein „weicher“ Bindestrich genannt.

div {
  width: 150px;
}
<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

Andere Tipps

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

Um aus diesem Link zu zitieren:

Die Gelegenheit zum Wortbruch (<wbr>) Das HTML-Element stellt eine Position im Text dar, an der der Browser optional eine Zeile umbrechen kann, obwohl seine Zeilenumbruchregeln andernfalls keinen Umbruch an dieser Stelle erzeugen würden.

Hier erfahren Sie, wie es im Beispiel des OP verwendet werden könnte (oder es in Aktion sehen unter JSFiddle):

<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, Informationen zum Zeilenumbruch finden Sie hier.Eine weitere Option ist die wbr-Tag, , und ​ Keines davon wird vollständig unterstützt.

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

Zusätzlich &shy; wird für Ihr Beispiel nicht funktionieren, da es auch Folgendes tun wird:

  • funktionieren, wenn die Worttrennung erfolgt, aber wenn keine Worttrennung erfolgt, werden keine Bindestriche angezeigt, oder

  • Arbeiten Sie nicht, wenn Sie nicht mit dem Wort brechen, aber zwei Bindestriche anzeigen, wenn Sie Wortverstöße in einer Pause hinzufügen.

In diesem speziellen Fall (in dem Ihre Zeichenfolge Bindestriche enthalten wird) würde ich den Text serverseitig in diesen 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 hyphen, und/oder zero width space.

Bei einem weichen Bindestrich kann Ihr Browser Wörter umbrechen (Hinzufügen eines Bindestrichs).Bei einem Leerzeichen mit der Breite Null kann Ihr Browser Wörter umbrechen (ohne etwas hinzuzufügen).

Wenn Ihr Code also etwa so aussieht:

111111&shy;222222&shy;-333333&#8203;444444-&#8203;555555

dann zeigt Ihr Browser dies ohne Wortumbruch an :

1111112222222-33333334444444-5555555

und das wird jedes mögliche Wort brechen :

111111-
222222-
-333333
444444-
555555

Wählen Sie einfach die Option aus, die Sie benötigen.In Ihrem Fall kann es zwischen 4 und 5 Sekunden liegen.

Sie können auch Folgendes verwenden:

word-break:break-all;

ex.

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

Ausgabe:

abababababa
ababababbba
abbabbababa
ababb

Wortumbruch bedeutet, das gesamte Wort oder die gesamte Zeile zu unterbrechen, auch wenn im Satz kein Leerzeichen vorhanden ist, das nicht in der angegebenen Breite oder Höhe liegt.Für die Mutter muss eine Breite oder Höhe angegeben werden.

Der geschützte Bindestrich funktioniert gut.

HTML-Entität (dezimal) 

&#8209;

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

Stellen Sie außerdem sicher, dass die Bindestriche CSS-Eigenschaft war nicht einstellen keiner (Der Standardwert ist Handbuch).

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

Ich hoffe, das kann helfen

verwenden <br>(break)-Tag an der Stelle, an der Sie die Zeile umbrechen möchten.

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

div {
  width: 150px;
}
<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>

wenn Sie einen Zeilenumbruch vor der Verwendung von Bindestrichen wünschen &#8203;- stattdessen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top