Wie man Wort-Pause auf einem Bindestrich?

stimmen
60

Bei einem relativ einfachen CSS:

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

Wie mache ich es so , dass die Zeichenfolge auf die beschränkt bleiben widthvon 150 , und einfach Wraps auf eine neue Zeile auf dem Bindestrich?

Veröffentlicht am 04/08/2008 um 01:17
quelle vom benutzer
In anderen Sprachen...                            


11 antworten

stimmen
63

Ersetzen Sie Ihre Bindestriche mit diesem:

&shy;

Es ist ein „weicher“ Bindestrich bezeichnet.

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

Beantwortet am 04/08/2008 um 01:25
quelle vom benutzer

stimmen
31

In allen modernen Browsern * (und in einigen älteren Browsern , auch), das <wbr>Element ist das perfekte Werkzeug die Möglichkeit , für die Bereitstellung von langen Worte an bestimmten Punkten zu brechen.

Ein Zitat aus diesem Link:

Das Wort Pause Gelegenheit ( <wbr>) HTML - Element stellt eine Position innerhalb Textes , in dem der Browser optional eine Linie brechen kann, obwohl seine Zeilenumbruch - Regeln würden sonst keine Pause an dieser Stelle erstellen.

Hier ist , wie es in dem OPs Beispiel verwendet werden könnte (oder es in Aktion sehen JSFiddle ):

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

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

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

Beantwortet am 30/01/2012 um 07:53
quelle vom benutzer

stimmen
17

Im Rahmen von CSS3, doch ist es nicht vollständig unterstützt, aber Sie können hier Informationen über Zeilenumbruch finden . Eine weitere Option ist der wbr - Tag & shy ;, und & # 8203; keine davon sind entweder vollständig unterstützt.

Beantwortet am 04/08/2008 um 01:25
quelle vom benutzer

stimmen
8

In diesem speziellen Fall (wo die Zeichenfolge wird Bindestriche enthalten) ich den Text zu dieser Server-Seite verwandeln würde:

<div style="width:150px;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>
Beantwortet am 05/12/2008 um 13:36
quelle vom benutzer

stimmen
8

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

Außerdem &shy;wird nicht für Ihr Beispiel funktioniert, wie wird es entweder:

  • arbeiten, wenn Wortumbruch- aber wenn nicht Wortumbruch- keine Bindestriche angezeigt werden, oder

  • Arbeit, wenn nicht Wortumbruch- aber Anzeige zwei Bindestriche, wenn Wortumbruch-, da es einen Bindestrich auf einer Pause fügt.

Beantwortet am 16/09/2008 um 00:15
quelle vom benutzer

stimmen
7

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

Auf einem weichen Bindestrich Ihrem Browser Wort-Pause kann (Hinzufügen eines Bindestrich). Auf einer Breite von Null Raum Ihr Browser kann Wortbruch (ohne Zugabe von etwas).

Wenn also Ihr Code ist so etwas wie:

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

dann wird Ihr Browser mit keinem Wort-Pause zeigen dies:

1111112222222-33333334444444-5555555

und dies wird jede mögliche Wort-Pause:

111111-
222222-
-333.333
444444-
555555

Nehmen Sie einfach die Option, die Sie benötigen. In Ihrem Fall kann es die zwischen 4s und 5s sein.

Beantwortet am 16/09/2010 um 10:04
quelle vom benutzer

stimmen
1

Sie können auch verwenden:

word-break:break-all;

Ex.

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

Ausgabe:

abababababa
ababababbba
abbabbababa
ababb

Wortbruch ist alle das Wort oder die Linie, auch wenn kein Raum in Satz, der nicht feets in vorgesehener Breite oder Höhe brechen. Mutter, dass Sie eine Breite oder Höhe zur Verfügung stellen muss.

Beantwortet am 27/08/2015 um 12:40
quelle vom benutzer

stimmen
0

Sie können 0 Breite Raum nach Bindestrich-Zeichen verwenden:

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

wenn Sie Zeilenumbruch vor Bindestrich wollen verwenden &#8203;-statt.

Beantwortet am 13/09/2018 um 10:21
quelle vom benutzer

stimmen
0

Hoffe, dass dies helfen kann

verwenden <br>(Pause) Tag , wo Sie die Linie zu durchbrechen wollen.

Beantwortet am 31/08/2017 um 10:53
quelle vom benutzer

stimmen
0

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

Stellen Sie außerdem sicher , dass die Bindestriche CSS - Eigenschaft wurde nicht eingestellt keine (Der Standardwert ist manuell ).

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

Beantwortet am 14/05/2015 um 04:29
quelle vom benutzer

stimmen
0

Der non-breaking Bindestrich funktioniert gut.

HTML Entity (dezimal)

&#8209;
Beantwortet am 21/03/2014 um 23:09
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more