Bootstrap tables overflowing with long unspaced text

I'm using Bootstrap and I have a table with a few columns, the last of which sometimes has a long piece of text without spaces. I noticed that under certain screen sizes, the table would overflow its parent div and create ugly overlapping with its sibling table.

I played around with it and I think the problem has to do with the text being unspaced. I created a jsfiddle that demonstrates what I mean.

As you can see, the top leftmost table is well behaved and simply grows vertically to accommodate more text. However, the bottom left table leads to an overflow on the right due to the long unspaced text and the right column of the bottom left table winds up "under" its sibling.

Does anyone have any tips on how I can fix this so that the very long text gets clipped or partially split onto a new line?

.the-table {
    table-layout: fixed;
    word-wrap: break-word;
}

Deprecated (i.e. word-wrap)

Add the following styles to your <table>

.the-table {
    table-layout: fixed;
    over-flow: break-word;
}

Then you can adjust your layout via-CSS as you wish.

This works without forcing table layout to be fixed Just add it to td or any

.is-breakable {
  word-break: break-word;
}

I was having trouble with these solutions working in Internet Explorer.

I used the following style to get it to finally work.

<td style="word-break: break-all">

You can use below css. This will wrap the text and apply ... in the end of the text.

e.g. This_is_a_large_text will be changed to This_is_a_lar...

td {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

You can also add tool tip to show the complete text value.

<td data-toggle="tooltip" title="${text}">${text}</td>

Albers answer did the trick for me

.the-table {
 table-layout: fixed;
 word-wrap: break-word;
}

In the JS to load it dynamically add

 $("#"  + tableName ).addClass('the-table'); 

Hope it helps!!