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

Im Internet Explorer funktioniert das Folgende bei mir. Beachten Sie die Hinzufügung des table-layout:fixed CSS-Attribut

td {
  border: 1px solid;
}

<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

Answer 2

<td style="word-break:break-all;">longtextwithoutspace</td>

o

<span style="word-break:break-all;">longtextwithoutspace</span>

Answer 3

Das ist weit hergeholt, aber überprüfen Sie es mit Firebug (oder ähnlich), damit Sie nicht versehentlich die folgende Regel erben:

white-space:nowrap;

Dies kann Folgendes außer Kraft setzen das von Ihnen festgelegte Zeilenumbruchverhalten.

Answer 4

Es hat sich herausgestellt, dass es keine gute Möglichkeit gibt, dies zu tun. Am nächsten kam ich ist das Hinzufügen von "overflow:hidden;" zum div um die Tabelle und verlieren den Text. Die wirkliche Lösung scheint jedoch zu sein, die Tabelle wegzulassen. Mit Divs und relativer Positionierung konnte ich den gleichen Effekt erzielen, ohne das Erbe von <table>

2015 UPDATE: Dies ist für diejenigen wie mich, die diese Antwort wollen. Nach 6 Jahren funktioniert dies, dank aller Mitwirkenden.

* { /* this works for all but td */
  word-wrap:break-word;
}

table { /* this somehow makes it work for td */
  table-layout:fixed;
  width:100%;
}

Answer 5

Wie bereits erwähnt, wird der Text innerhalb von div funktioniert fast. Sie müssen nur den width der div was für statische Layouts von Vorteil ist.

Dies funktioniert mit FF 3.6, IE 8 und Chrome.

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>