Zeilenumbruch in einer HTML-Tabelle

Question

Ich habe mit word-wrap: break-word um Text einzuschließen div s und span s. In Tabellenzellen scheint es jedoch nicht zu funktionieren. Ich habe eine Tabelle eingestellt auf width:100% mit einer Zeile und zwei Spalten. Text in Spalten, obwohl mit dem obigen Stil versehen word-wrap nicht verpackt. Dadurch wird der Text über die Grenzen der Zelle hinausgeschoben. Dies geschieht in Firefox, Google Chrome und Internet Explorer.

So sieht die Quelle aus:

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

Das lange Wort oben ist größer als der Rahmen meiner Seite, aber es bricht nicht mit dem obigen HTML. Ich habe die folgenden Vorschläge ausprobiert, indem ich Folgendes hinzugefügt habe text-wrap:suppress y text-wrap:normal aber beides hat nicht geholfen.

Answer 1

Das Einzige, was getan werden muss, ist, die Breite der <td> oder die <div> innerhalb der <td> je nach dem von Ihnen angestrebten Layout.

z. B:

<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>

o

 <table style="width: 100%;" border="1"><tr>
    <td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
    <td><span style="display: inline;">Foo</span></td>

</tr></table>

Answer 2

Ich bin auf ein ähnliches Problem gestoßen. Ich hatte eine Tabelle innerhalb eines Bootstrap-Modals in einer AngularJS-Anwendung. Wenn ich den Filter der Tabelle änderte und lange Werte in der betreffenden Zelle erschienen, würde der Text außerhalb der Zelle und außerhalb des Modals überlaufen. Diese CSS endete das Problem zu beheben, angewendet auf die TD:

style="white-space:pre-wrap; word-break:break-word"

Dadurch wurden die Werte auch bei Änderungen des Tabelleninhalts korrekt umbrochen.

Answer 3

Es scheint, dass Sie Folgendes einstellen müssen word-wrap:break-word; auf ein Blockelement ( div ), mit angegebener (nicht relativer) Breite. Bsp:

<table style="width: 100%;"><tr>
    <td><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>
    <td><span style="display: inline;">Foo</span></td>
</tr></table>

oder mit word-break:break-all auf Anregung von Abhishek Simon.

Answer 4

Die Antwort, die die Prämie gewonnen hat, ist richtig, aber sie funktioniert nicht, wenn die erste Zeile der Tabelle hat eine zusammengeführte/verbundene Zelle (alle Zellen erhalten die gleiche Breite).

In diesem Fall sollten Sie die colgroup y col Tags, um sie richtig anzuzeigen:

<table style="table-layout: fixed; width: 200px">
<colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
</colgroup>
<tr>
    <td colspan="2">Merged cell</td>
</tr>
<tr>
    <td style="word-wrap: break-word">VeryLongWordInThisCell</td>
    <td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>

Answer 5

Ich habe alle ausprobiert, aber in meinem Fall funktioniert es nur bei mir.

white-space: pre-wrap;
word-wrap: break-word;