Bootstrap tables overflowing with long unspaced text

Question

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?

Answer 1

.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.