CSS-Zeilenumbruch funktioniert nicht in Tabelle

Question

Ich muss eine Tabelle mit festen Headern erstellen, eine Tabelle Körper scrollbar auf der Y-Achse (aber nicht auf der X-Achse) und Spalten einer festen Breite.

fand ich diese Antwort auf mein Problem: https://stackoverflow.com/a/17585032/6033166

Es wirkt wie ein Zauber (! Vielen Dank) und ich begann, meinen Code zu dieser Antwort zu stützen. Ich fügte table-layout: fixed, word-wrap: break-word und overflow-y: auto; overflow-x: hidden; hinzu, um meine zusätzlichen Anforderungen anzugehen.

Allerdings bleibt ein Problem bestehen. Wenn ein sehr langer Text in eine Tabellenzelle eingegeben wird, ohne (oder mit sehr wenigen) Leerzeichen, werden keine Zeilenumbrüche hinzugefügt, stattdessen ändert sich die Breite durch Brute-Force, die Tabellenzeile "macht Platz" für die eine großer Eingang, schiebt die anderen Zellen zu den Seiten.

Ich habe Antworten und Vorschläge zu SO gefunden, die sagen, dass ich das <wbr> Tag zum Inhalt hinzufügen könnte und so den Browser vorschlage, wenn man Zeilenumbrüche macht. Das Problem ist hier, dass der Inhalt aus einer Datenbank (über C#) abgerufen wird und dann vor der Anzeige verarbeitet werden müsste, was ein Schritt ist, den ich möglichst überspringen möchte. Wenn es irgendeinen Weg gibt, möchte ich das in CSS behalten. Ich bin jedoch auch sehr offen für andere Lösungen, wenn es keine andere Möglichkeit gibt.
Ich versuchte auch Break-All, das gleiche Ergebnis.

Dies ist meine aktuelle CSS für die Tabelle:

table.tableSection { 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
    word-wrap: break-word; 
} 
table.tableSection thead, table.tableSection tbody { 
    float: left; 
    width: 100%; 
} 
table.tableSection tbody { 
    overflow-y: auto; 
    overflow-x: hidden; 
    height: 100px; 
} 
table.tableSection tr { 
    width: 100%; 
    display: table; 
    text-align: left; 
} 
table.tableSection th, table.tableSection td { 
    width: 33%; 
} 

Und dies ist der HTML-Code:

<table class="tableSection"> 
<thead> 
    <tr> 
     <th>1</th> 
     <th>2</th> 
     <th>3</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>Text</td> 
     <td>Text</td> 
     <td>Text</td> 
    </tr> 
    <tr> 
     <td>Text</td> 
     <td>This does work very well with blank spaces. The text has no limitation in size, line breaks will simply be added.</td> 
     <td>Text</td> 
    </tr> 
    <tr> 
     <td>Text</td> 
     <td>This_does_not_work_sadly,_which_is_a_huge_problem,_since_blank_spaces_are_not_permitted_as_word_delimiters.</td> 
     <td>Text</td> 
    </tr> 
    <tr> 
     <td>Text</td> 
     <td>Text</td> 
     <td>Text</td> 
    </tr> 
</tbody> 

Hier ist ein Link zu meinem jsfiddle zu zeigen, was ich meine :

Answer 1

Fügen Sie den folgenden Code in Ihre td css Stil table.tableSection th, table.tableSection td { ... }

word-break: break-all; 

Hier die aktualisierte Geige ist: https://jsfiddle.net/bmc7r8rz/8/

Answer 2

Ich würde einfach verwenden:

table.tableSection th, table.tableSection td { 
    float: left; 
    width: 33%; 
    word-wrap: break-all; 
}