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

Workaround, der overflow-wrap verwendet und mit normalem Tabellenlayout + Tabellenbreite 100% funktioniert

https://jsfiddle.net/krf0v6pw/

HTML

<table>
  <tr>
    <td class="overflow-wrap-hack">
      <div class="content">
        wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
      </div>
    </td>
  </tr>
</table>

CSS

.content{
  word-wrap:break-word; /*old browsers*/
  overflow-wrap:break-word;
}

table{
  width:100%; /*must be set (to any value)*/
}

.overflow-wrap-hack{
  max-width:1px;
}

Vorteile:

• Verwendet overflow-wrap:break-word anstelle von word-break:break-all . Das ist besser, weil es zuerst versucht, bei Leerzeichen umzubrechen, und das Wort nur dann abschneidet, wenn es größer als sein Container ist.
• No table-layout:fixed benötigt. Verwenden Sie die normale automatische Größenanpassung.
• Nicht erforderlich, um fest zu definieren width oder fest max-width in Pixel. Definieren Sie % des Elternteils, falls erforderlich.

Getestet in FF57, Chrome62, IE11, Safari11

Answer 2

Problem mit

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

ist, dass es nicht so gut funktioniert, wenn Text hat einige Räume, z.B.

<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>

Wenn das Wort andthenlongerwithoutspaces passt in eine Tabellenzelle in einer Zeile, aber long text with andthenlongerwithoutspaces nicht, wird das lange Wort in zwei Teile geteilt, anstatt umbrochen zu werden.

Alternative Lösung: U+200B einfügen ( ZWSP ), U+00AD ( weicher Bindestrich ) oder U+200C ( ZWNJ ) in jedem langen Wort nach etwa jedem 20. Zeichen (siehe jedoch die Warnung unten):

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

Warnung : Das Einfügen zusätzlicher Zeichen mit der Länge Null hat keinen Einfluss auf das Lesen. Es wirkt sich jedoch auf Text aus, der in die Zwischenablage kopiert wird (diese Zeichen werden natürlich auch kopiert). Wenn der Text in der Zwischenablage später in einer Suchfunktion in der Webanwendung verwendet wird, wird die Suche unterbrochen. Obwohl diese Lösung in einigen bekannten Webanwendungen zu sehen ist, sollten Sie sie nach Möglichkeit vermeiden.

Warnung : Wenn Sie zusätzliche Zeichen einfügen, sollten Sie nicht mehrere Codepunkte innerhalb eines Graphems trennen. Siehe https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries für weitere Informationen.

Answer 3

Ändern Sie Ihren Code

word-wrap: break-word;

à

word-break:break-all;

Beispiel

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-break:break-all;">longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content</div>
    </td>
    <td><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>

Answer 4

Überprüfen Sie diese Demo

   <table style="width: 100%;">
    <tr>
        <td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
        </td>
        <td>
            <span style="display: inline;">Foo</span>
        </td>
    </tr>
</table>

Hier ist der Link zu lesen

Answer 5

Getestet in IE 8 und Chrome 13.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td>
              <div style="word-wrap: break-word;">
                 longtexthere
              </div>
        </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

Dadurch wird die Tabelle an die Breite der Seite angepasst und jede Spalte nimmt 50 % der Breite ein.

Wenn Sie möchten, dass die erste Spalte mehr Platz auf der Seite einnimmt, fügen Sie ein width: 80% zum td wie im folgenden Beispiel, wobei Sie 80 % durch den von Ihnen gewünschten Prozentsatz ersetzen.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td style="width:80%">
               <div style="word-wrap: break-word;">
                 longtexthere
               </div>
            </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>