Wie erzwinge ich einen Zeilenumbruch in einem langen Wort in einem DIV?

417

Okay, das verwirrt mich wirklich. Ich habe einige Inhalte in einem Div wie folgt:

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

Der Inhalt läuft jedoch (wie erwartet) über den DIV hinaus, da das Wort zu lang ist.

Wie kann ich den Browser zwingen, das Wort bei Bedarf zu "brechen", um den gesamten Inhalt darin zu platzieren?

Nathan Osman
quelle
Schauen Sie sich diese Frage an: stackoverflow.com/questions/2046530/…
nickf

Antworten:

608

Verwenden word-wrap:break-word;

Es funktioniert sogar in IE6, was eine angenehme Überraschung ist.


word-wrap: break-wordwurde ersetzt, mit overflow-wrap: break-word;dem in jedem modernen Browser funktioniert. IE, ein toter Browser, wird sich für immer auf das Veraltete und Nicht-Standardische verlassen word-wrap.

Bestehende Verwendungen von word-wrapheute funktionieren immer noch, da es sich um einen Alias overflow-wrapgemäß der Spezifikation handelt.

Chi
quelle
75
Tatsächlich ist Zeilenumbruch eine IE-Erfindung. Kein Wunder also, dass es im IE funktioniert :)
Savas Vedova
1
Damit dies in einer Tabelle funktioniert, müssen Sie möglicherweise die table-layout: fixed;auf die Tabelle anwenden
Serj Sagan
28
word-wrap: break-wordhat bei mir nicht funktioniert, aber word-break: break-wordwie unten von @rahul vorgeschlagen.
Yves
1
Hinweis: Dies funktioniert nur, wenn Sie es im übergeordneten div im IE angeben (nicht für den inneren Bereich innerhalb von div).
SMS
125

Ich bin mir nicht sicher über die Browserkompatibilität

word-break: break-all;

Sie können auch das <wbr>Tag verwenden

<wbr>(Wortumbruch) bedeutet: "Der Browser kann hier einen Zeilenumbruch einfügen, wenn er dies wünscht." Wenn der Browser einen Zeilenumbruch nicht für notwendig hält, passiert nichts.

rahul
quelle
23
Seien Sie sich dieses Wortbruchs bewusst: Alles brechen; bricht Wörter in der Mitte, wenn es noch Zeichen in einer Zeile mit anderen Wörtern vor sich aufnehmen kann, was möglicherweise nicht erwünscht ist, während der Zeilenumbruch: break-word; Verschiebt Wörter in eine neue Zeile und bricht das Wort nur, wenn es zu lang ist, um überhaupt in die eigene Zeile im Container zu passen. Beispiel: jsfiddle.net/4AKhn/1
alexteg
Alles kaputt macht alles kaputt. Okay, mit bestimmten Klassen zu verwenden, die nur eine lange URL usw. haben, aber nicht mit BODY oder P
Upendra
Dies ist definitiv perfekt (und erwünscht) akzeptabel, wenn Sie versuchen, so etwas wie einen Anforderungs-URI in einer Protokolltabellenzelle anzuzeigen und ihn benötigen, um die gesamte Tabelle nicht mehr mit einer riesigen langen Zelle zu beschädigen. Es ist erwünscht, mitten in einem 'Wort' zu brechen;) Während die akzeptierte Antwort diesbezüglich nicht in die Hocke geht.
IncredibleHat
@ Skelly1983 gibt es nicht so etwas wie IE12
TylerH
@ TylerH Ich bin mir dessen bewusst, danke, dass du mich nach 3 Jahren darauf hingewiesen hast. Dies ist in der Support-Tabelle des Browsers von w3schools für das wbr-Tag aufgeführt, in dem die Unterstützung als "Internet Explorer / Edge" aufgeführt ist und die Versionsnummer als 12.0 aufgeführt ist. Dies ist tatsächlich die erste Version von Edge.
Skelly1983
98

Dies könnte zu der akzeptierten Antwort für eine browserübergreifende Lösung hinzugefügt werden.

Quellen:

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

 /* Non standard for webkit */
     word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}
Milche Patern
quelle
Ich habe es auf Chrome / Opera und Safari bekommen, aber immer noch nicht auf Firefox und IE. Damit habe ich Firefox gelöst, aber der IE geht immer noch den Container durch (ich habe einen langen Dateinamen mit nur alphanumerischen Zeichen).
Kamafeather
1
Hallo Kamafeather, ich bin mir nicht sicher, aber wenn Sie einen sehr langen Dateinamen haben, den Sie zu brechen versuchen, könnte der gesamte Kontext (Browser, HTML-CSS-Code) hilfreich sein, um Ihnen weiter zu helfen. Vielleicht könnten Sie mit Ihrer Situation eine andere Frage stellen.
Milche Patern
Bitte beachten Sie, dass dies Wörter an ungrammatischen Stellen bricht.
@ user1322720 Was ist ein "ungrammatischer" Ort?
TylerH
31

Ich habe gerade das gleiche Problem gegoogelt und meine endgültige Lösung HIER veröffentlicht . Es ist auch für diese Frage relevant.

Sie können dies einfach mit einem div tun, indem Sie ihm den Stil geben word-wrap: break-word(und möglicherweise müssen Sie auch seine Breite einstellen).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

Doch für Tabellen , müssen Sie auch gelten: table-layout: fixed. Dies bedeutet, dass die Spaltenbreiten nicht mehr fließend sind, sondern nur auf der Grundlage der Spaltenbreiten in der ersten Zeile (oder über angegebene Breiten) definiert werden. Lesen Sie hier mehr .

Beispielcode:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}
Simon East
quelle
1
Vielen Dank für die Tabellenlösung;) Ich verstehe jedoch nicht ganz, warum Break-Word nicht mit automatischem Layout verwendet werden kann. Irgendein Vorschlag?
OndObno
@ondObno Ja, ich bin mir des technischen Grundes nicht sicher, aber einige Browser scheinen sich so zu verhalten. Vielleicht liegt es daran, dass super lange Wörter alle Berechnungen durcheinander bringen, die zur Bestimmung der Breite jeder Spalte erforderlich sind.
Simon East
Die Einstellung width: 100%;war der einzige Weg, dies für mich auf FF und Chrom zum Laufen zu bringen!
Putzi San
27

&#8203;ist die HTML-Entität für ein Unicode-Zeichen, das als Zero-Width-Space (ZWSP) bezeichnet wird. Dabei handelt es sich um ein unsichtbares Zeichen, das eine Zeilenumbruchmöglichkeit angibt. In ähnlicher Weise dient der Bindestrich dazu, eine Zeilenumbruchmöglichkeit innerhalb einer Wortgrenze anzugeben.

Davidcondrey
quelle
1
Sehr schöner Tipp! Nur zur Ergänzung: &#8203;Hat eine niedrigere Priorität als ein Leerraum (dh wenn einer in der Nähe ist, wird die Linie stattdessen in einem Leerraum unterbrochen).
CPHPython
Scheint das <wbr/>Unicode-Äquivalent zu sein, nach dem ich gesucht habe
Xenos
20

Es wurde festgestellt, dass die Verwendung der folgenden Funktionen in den meisten gängigen Browsern (Chrome, IE, Safari iOS / OSX) mit Ausnahme von Firefox (v50.0.2) funktioniert, wenn Sie Flexbox verwenden und sich darauf verlassen width: auto.

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

Hinweis: Wenn Sie keinen Autoprefixer verwenden, müssen Sie möglicherweise Browser-Herstellerpräfixe hinzufügen.

Eine andere Sache, auf die Sie achten sollten, ist, dass Text, der &nbsp;für den Abstand verwendet wird, Zeilenumbrüche in der Mitte des Wortes verursachen kann.

Andrew
quelle
5
Genau das brauchte ich. Die anderen Lösungen funktionierten nicht mit der Breite: 100%. Eine Sache zu beachten: Wortumbruch: Umbruchwort; sollte wortumbruch sein: break-all;
Jscul
7

CSS word-wrap:break-word; , getestet in FireFox 3.6.3

Babiker
quelle
5

Ich habe mein Problem mit dem folgenden Code gelöst.

display: table-caption;
Thadeu Esteves Jr.
quelle
5

Entfernen Sie white-space: nowrap, falls vorhanden.

Implementieren:

white-space: inherit;
word-break: break-word;
Vineet Kumar Singh
quelle
3

Leerzeichen werden vom Browser beibehalten. Der Text wird bei Bedarf umbrochen und in Zeilenumbrüchen angezeigt

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

DEMO

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}
<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>

Tính Ngô Quang
quelle
2

Von MDN :

Die overflow-wrapCSS-Eigenschaft gibt an, ob der Browser Zeilenumbrüche in Wörter einfügen soll, um zu verhindern, dass Text über das Inhaltsfeld läuft.

Im Gegensatz zu word-break, overflow-wrapschaffen wird nur eine Pause , wenn ein ganzes Wort nicht in einer eigenen Zeile platziert werden kann , ohne überzulaufen.

So können Sie verwenden:

overflow-wrap: break-word;

Kann ich verwenden ?

Shiva127
quelle
2

Zuerst sollten Sie die Breite Ihres Elements identifizieren. Z.B:

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}
<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

Wenn der Text die Elementbreite erreicht, wird er in Zeilen unterteilt.

Tran Nam Hung
quelle
2

Wie in der Antwort von @ davidcondrey erwähnt, gibt es nicht nur das ZWSP, sondern auch das SHY &#173; &shy;, das in sehr langen, konstruierten Wörtern (denken Sie an Deutsch oder Niederländisch) verwendet werden kann, die an der Stelle gebrochen werden müssen, an der Sie es möchten. Unsichtbar, aber es gibt einen Bindestrich in dem Moment, in dem er benötigt wird, wodurch sowohl das Wort verbunden als auch die Zeile bis zum Äußersten gefüllt bleiben.

Auf diese Weise könnte das Wort luchthavenpolitieagent so notiert werden, lucht&shy;haven&shy;politie&shy;agentdass es längere Teile als die Silben des Wortes ergibt.
Obwohl ich nie etwas offizielles darüber gelesen habe, erreichen diese weichen Bindestriche in Browsern eine höhere Priorität als die offiziellen Bindestriche in den einzelnen Wörtern des Konstrukts ( wenn sie überhaupt eine Erweiterung dafür haben).
In der Praxis ist kein Browser in der Lage, ein so langes, konstruiertes Wort selbst zu brechen. auf kleineren Bildschirmen, was zu einer neuen Zeile oder in einigen Fällen sogar zu einer Ein-Wort-Zeile führt (wie wenn zwei dieser konstruierten Wörter folgen).

Zu Ihrer Information: Es ist niederländisch für Flughafenpolizisten

David de Beer
quelle
0

Wortumbruch: Normal scheint besser zu verwenden als Wortumbruch: Umbruchwort, da Umbruchwort initial wie EN durchbricht

word-break: normal
Matoeil
quelle
-3

Mach das:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}
amit bende
quelle
-4

Probieren Sie dies einfach in unserem Stil

white-space: normal;
Benjamin Fuentes
quelle
1
Das Duplizieren von Antworten über mehrere Fragen hinweg ist in den meisten Fällen verpönt . In diesem Fall scheint es eine falsche Antwort auf beide Fragen zu sein. normalist der Standardwert white-space. Ich denke, dass das Hinzufügen keine Auswirkung auf das Beispiel in der Frage haben würde. Bitte korrigieren Sie mich, wenn ich mich irre.
Jeremy Banks
Dies hängt von der Überschreibung durch das CSS ab. In meinem Fall musste ich es in meiner JSF-Komponente auf "style" neu deklarieren, um den Standard-CSS-Stil zu überschreiben, der nicht "white-space: normal" war.
Benjamin Fuentes