Wie erzwingt man einen Zeilenumbruch bei einem langen Wort in einem DIV?

Question

Okay, das verwirrt mich jetzt wirklich. Ich habe einige Inhalte innerhalb eines div wie so:

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

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

</div>

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

Wie kann ich den Browser zwingen, das Wort umzubrechen, damit der gesamte Inhalt hineinpasst?

Answer 1

Der Leerraum wird vom Browser beibehalten. Text wird umbrochen, wenn nötig, und bei Zeilenumbrüchen

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

Answer 2

Ich habe herausgefunden, dass das Folgende in den meisten gängigen Browsern (Chrome, IE, Safari iOS/OSX) außer Firefox (v50.0.2) funktioniert, wenn man Flexbox verwendet und sich auf width: auto .

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

Hinweis: Möglicherweise müssen Sie die Präfixe der Browseranbieter hinzufügen, wenn Sie keinen Autoprefixer verwenden.

Ein weiterer Punkt, auf den Sie achten sollten, ist Text mit   für den Zeilenabstand kann zu Zeilenumbrüchen mitten im Wort führen.

Answer 3

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

Answer 4

Entfernen white-space: nowrap wenn es eine gibt.

Durchführen:

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

Answer 5

Wie in der Antwort von @davidcondrey erwähnt, gibt es nicht nur die ZWSP, sondern auch die SHY ­ ­ die in sehr langen, konstruierten Wörtern (z. B. im Deutschen oder Niederländischen) verwendet werden können, die auf der Stelle gebrochen werden müssen vous es sein soll. Unsichtbar, aber es gibt einen Bindestrich in dem Moment, in dem er benötigt wird, so dass sowohl das Wort verbunden als auch die Zeile bis zum Äußersten gefüllt wird.

Auf diese Weise wird das Wort luchthavenpolitieagent könnte notiert werden als lucht­haven­politie­agent die längere Teile als die Silben des Wortes ergeben.
Obwohl ich nie etwas Offizielles darüber gelesen habe, haben diese weichen Bindestriche in Browsern eine höhere Priorität als die offiziellen Bindestriche in den einzelnen Wörtern des Konstrukts ( wenn sie haben überhaupt eine Erweiterung dafür).
In der Praxis ist kein Browser in der Lage, ein so langes, zusammengesetztes Wort von selbst umzubrechen; auf kleineren Bildschirmen führt dies zu einer neuen Zeile oder in manchen Fällen sogar zu einer Ein-Wort-Zeile (z. B. wenn zwei dieser zusammengesetzten Wörter aufeinander folgen).

Zu Ihrer Information: Das ist Niederländisch für Flughafenpolizist