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

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?

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.

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.

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

Quellen:

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
• http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

.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;
}

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 */
}

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

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  für den Abstand verwendet wird, Zeilenumbrüche in der Mitte des Wortes verursachen kann.

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

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

display: table-caption;

Entfernen Sie white-space: nowrap, falls vorhanden.

Implementieren:

white-space: inherit;
word-break: break-word;

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>

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 ?

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.

Wie in der Antwort von @ davidcondrey erwähnt, gibt es nicht nur das ZWSP, sondern auch das 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­haven­politie­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

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

word-break: normal

Mach das:

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

#sampleDiv{
   overflow-wrap: break-word;
}

Probieren Sie dies einfach in unserem Stil

white-space: normal;