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

Verwenden Sie word-wrap:break-word;

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

---

word-wrap: break-word wurde ersetzt durch overflow-wrap: break-word; die in jedem modernen Browser funktioniert. Da der IE ein toter Browser ist, wird er sich für immer auf die veraltete und nicht standardisierte word-wrap stattdessen.

Bestehende Verwendungen von word-wrap heute noch funktionieren, da es sich um einen Alias für overflow-wrap gemäß der Spezifikation.

Answer 2

Ich bin mir nicht sicher über die Browser-Kompatibilität

word-break: break-all;

Sie können auch die <wbr> Tag

<wbr> (Wortbruch) bedeutet: "Der Browser kann hier einen Zeilenumbruch einfügen, wenn er möchte." Der Browser ist nicht der Meinung einen Zeilenumbruch für nicht notwendig geschieht nichts.

Answer 3

Dies könnte 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;

  }

Answer 4

Ich habe gerade nach dem gleichen Problem gegoogelt und meine endgültige Lösung gepostet HIER . Das ist auch für diese Frage relevant.

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

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

Allerdings, für Tabellen müssen Sie sich ebenfalls bewerben: table-layout: fixed . Das bedeutet, dass die Spaltenbreiten nicht mehr fließend sind, sondern nur noch auf der Grundlage der Breiten der Spalten in der ersten Zeile (oder über angegebene Breiten) definiert werden. Lesen Sie hier mehr .

Beispiel-Code:

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

Answer 5

​ ist die HTML-Entität für ein Unicode-Zeichen namens Zero-Width Space (ZWSP), ein unsichtbares Zeichen, das einen Zeilenumbruch ermöglicht. In ähnlicher Weise dient der Bindestrich dazu, einen Zeilenumbruch innerhalb einer Wortgrenze zu kennzeichnen.