html - Wie man spricht

Translate

Bei einem relativ einfachen CSS:

div {
  width: 150px;
}
<div>
  12333-2333-233-23339392-332332323
</div>
This question and all comments follow the "Attribution Required."

Alle Antworten

Translate

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>
Quelle
Translate

In allen modernen Browsern*(und in einigenältere Browserauch), die<wbr>Elementist das perfekte Werkzeug, um an bestimmten Stellen lange Wörter zu brechen.

Um aus diesem Link zu zitieren:

Die Gelegenheit zum Wortbruch (<wbr>) Das HTML-Element stellt eine Position innerhalb des Textes dar, an der der Browser optional eine Zeile unterbrechen kann, obwohl seine Zeilenumbruchregeln ansonsten keine Unterbrechung an dieser Stelle verursachen würden.

Hier erfahren Sie, wie es im Beispiel des OP verwendet werden kann (oder sehen Sie es in Aktion unterJSFiddle):

<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>
Quelle
Translate

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

Quelle
Translate

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

zusätzlich&shy;funktioniert für Ihr Beispiel nicht, wie es auch sein wird:

  • 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.

Quelle
Translate

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>
Quelle
Translate

Je nachdem, was Sie genau sehen möchten, können Sie eine Kombination aus verwendenhyphen, soft hyphenund / oderzero 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&shy;222222&shy;-333333&#8203;444444-&#8203;555555

dann zeigt Ihr Browser dies ohne Wortumbruch an:

1111112222222-33333334444444-5555555

und das wird jeder mögliche Wortumbruch:

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

Quelle
Translate

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 aller Wörter oder Zeilen, 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.

Quelle
Translate

Der nicht brechende Bindestrich funktioniert gut.

HTML-Entität (dezimal)

&#8209;
Quelle
Translate

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

Stellen Sie außerdem sicher, dass dieBindestricheCSS-Eigenschaft warnichteinstellenkeiner(Der Standardwert istHandbuch).

<wbr>wird nicht unterstützt vonInternet Explorer.

Quelle
Translate

Hoffe das kann helfen

verwenden<br>(break) Tag, an dem Sie die Linie brechen möchten.

Quelle
Translate

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>
Quelle