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

Ich habe mein Problem mit folgendem Code gelöst.

display: table-caption;

Answer 2

Word-break: normal scheint besser zu sein als word-break: break-word, weil break-word Initialen wie EN umbricht.

word-break: normal

Answer 3

Von MDN :

El overflow-wrap CSS-Eigenschaft gibt an, ob der Browser Zeilenumbrüche innerhalb von Wörtern einfügen soll, um zu verhindern, dass der Text den Inhaltsbereich überfüllt.

Im Gegensatz zu word-break , overflow-wrap erzeugt nur dann einen Umbruch, wenn ein ganzes Wort nicht in eine eigene Zeile gesetzt werden kann, ohne dass es überläuft.

Sie können also verwenden:

overflow-wrap: break-word;

Kann ich die ?

Answer 4

Zunächst sollten Sie die Breite Ihres Elements bestimmen. Z.B.:

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}

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

so dass der Text, wenn er die Elementbreite erreicht, in Zeilen aufgeteilt wird.

Answer 5

.word-break {
   word-break: keep-all;
   word-wrap: break-word;
}