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

Sie können ein Rastersystem verwenden für diese.

<div class="container" style="background-color: green; width: 200px; height: 300px;">
   <div class="row">Thisisatest.Thisisatest.Thisisatest.</div>
   <div class="row">Thisisatest.Thisisatest.Thisisatest.</div>
 </div>

Answer 2

Tun Sie dies:

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

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

Answer 3

Versuchen Sie es einfach in unserem Stil

white-space: normal;