Wie kann man mit einem Wortspruch brechen?

  • Gegeben ein relativ einfaches CSS:

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

    Wie mache ich es so, dass die Zeichenfolge auf width von 150 beschränkt bleibt und einfach umläuft eine neue Zeile auf dem Bindestrich?

    30 November 2016
    Nhan
10 answers
  • Ersetzen Sie Ihre Bindestriche durch Folgendes:

     &shy;
     

    Dies wird als "weicher" Bindestrich bezeichnet.

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

    30 November 2016
    Nhan
  • In allen modernen Browsern * (und in einigen älteren Versionen Browser ), ist das <wbr> das perfekte Element Werkzeug, um die Möglichkeit zu bieten, lange Wörter an bestimmten Stellen zu brechen.

    Um von diesem Link zu zitieren:

    Das HTML-Element "Word Break Opportunity" (<wbr>) stellt eine Position innerhalb eines Textes dar, an der der Browser optional eine Zeile unterbrechen kann, obwohl die Zeilenumbruchregeln an dieser Stelle sonst keinen Break erzeugen würden.

    < / blockquote>

    So könnte es im OP-Beispiel verwendet werden (oder in Aktion unter JSFiddle ):

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

    * I ' 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> 
    < / div>

    30 November 2016
    Nhan
  • Als Teil von CSS3 wird es noch nicht vollständig unterstützt, . Sie finden es jedoch Informationen zum Zeilenumbruch hier . Eine weitere Option ist das wbr-Tag, & amp; shy; und & amp; # 8203; Keine davon werden entweder vollständig unterstützt.

    11 July 2014
    HopelessN00bJohn Downey
  • Ihr Beispiel funktioniert erwartungsgemäß in Google Chrome, Safari (Windows) und IE8. In Firefox 3 und Opera 9.5 bricht der Text aus dem 150px-Feld.

    Außerdem funktioniert &shy; für Ihr Beispiel nicht, da es entweder Folgendes ist:

    • funktionieren, wenn das Wort brechen, aber wenn das Wort nicht bricht, keine Bindestriche angezeigt werden oder

    • arbeiten, wenn es nicht wortwörtlich ist, sondern beim Brechen von Wörtern zwei Bindestriche anzeigen, , da bei einem Bruch ein Bindestrich hinzugefügt wird.

    16 September 2008
    Dave Rutledge
  • In diesem speziellen Fall (wo Ihre Zeichenfolge Bindestriche enthalten wird), 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>
     
    05 December 2008
    Peter T. LaComb Jr.
  • Je nachdem, was Sie genau sehen möchten, können Sie eine Kombination aus hyphen, soft hyphen und / oder zero width space verwenden.

    Ein Wenn Sie einen weichen Bindestrich verwenden, kann Ihr Browser einen Wortbruch ausführen (einen Bindestrich hinzufügen). In einem Bereich mit einer Breite von null kann Ihr Browser einen Wortwechsel durchführen (ohne etwas hinzuzufügen).

    Also , wenn Ihr Code in etwa so aussieht:

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

    , zeigt Ihr Browser dies ohne Wortwechsel an:

    1111112222222-333333344444-5555555

    und dies wird jedes mögliche Wort- break:

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

    28 March 2014
    Up_One
  • Sie können auch Folgendes verwenden:

     word-break:break-all;
     

    ex.

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

    Ausgabe:

     abababababa
    ababababbba
    abbabbababa
    ababb
     

    wortumbruch bedeutet, dass das gesamte Wort oder die gesamte Zeile unterbrochen wird, auch wenn kein Leerzeichen in einem Satz steht, der nicht in der angegebenen Breite oder Höhe passt. Nuss dafür müssen Sie eine Breite oder Höhe angeben.

    27 August 2015
    Ajay Gupta
  • Hoffen Sie, dass dies helfen kann.

    Verwenden Sie den Tag <br> (break), an dem Sie die Zeile unterbrechen möchten

    31 August 2017
    Mohammed Wahed Khan
  • Der sichere Bindestrich funktioniert gut.

    HTML-Entität (Dezimalzahl)

     &#8209;
     
    22 March 2014
    Marcus Hoelscher
  • Anstelle von - können Sie auch &hyphen; oder \u2010 verwenden.

    Stellen Sie außerdem sicher, dass die css-Eigenschaft hyphens verwendet wird war nicht auf keine gesetzt (Der Standardwert ist manuell ).

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

    14 May 2015
    TObject