Tabular data that goes beyond borders

Question

In short, I got

<div id="tablewrapper"> <table> <tr> <td>veryveryveryveryveryeryveryveryveryveryveryveryveryveryvery longtext</td> </tr> <table> </div> 

And my very long text goes beyond my table, div and shell borders. What does it look like

textextexttextextexttextextext (border) | (border) textextexttextextexttextextextext

which css rules should i use to loosen it in the next line, for example:

texttexttexttexttexttexttexttexttext (border)
texttexttexttexttexttexttex

We tried setting the display or width.

Answer 1

Use the table-layout attribute : fixed; (be sure to specify the table also the width, for example 100% ) on the table along with applying word-wrap:break-word to td .

Here is jsFiddle.

---

CSS

 table { table-layout: fixed; width: 100% } td { word-wrap: break-word; } 

Answer 2

Use word-break:break-all to break text anywhere:

 <td style="word-break:break-all">veryveryveryveryveryeryveryveryveryveryveryveryveryveryvery longtext</td>