Estou usando o Bootstrap e tenho uma tabela com algumas colunas, a última das quais às vezes tem um longo texto sem espaços. Percebi que, sob certos tamanhos de tela, a tabela transbordaria seu div pai e criaria uma sobreposição feia com sua tabela de irmãos.

Eu brinquei com isso e acho que o problema tem a ver com o texto sendo colocado. Eu criei umjsfiddle Isso demonstra o que eu quero dizer.

Como você pode ver, a tabela superior à esquerda é bem comportada e simplesmente cresce verticalmente para acomodar mais texto. No entanto, a parte inferior esquerda da tabela leva a um estouro à direita, devido ao texto longo e não espaçado, e a coluna direita da tabela inferior esquerda acaba "abaixo" de seu irmão.

Alguém tem alguma dica sobre como eu posso consertar isso para que o texto muito longo fique cortado ou parcialmente dividido em uma nova linha?