table data going outside borders

Question

Briefly , i got

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

And my very long text is going outside my table,div and wrapper borders. Looking like this

textextexttextextexttextextext(border)|(border)textextexttextextexttextextext

what css rules should i use to displey it in next line like:

texttexttexttexttexttexttexttexttext(border)
texttexttexttexttexttexttex

Have tried setting display or width.

Answer 1

Use the table-layout: fixed; attribute (be sure to give the table a width too, e.g. 100%) on the table along with applying word-wrap:break-word to the td's.

Here's a 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>