Estoy usando Bootstrap y tengo una tabla con algunas columnas, la última de las cuales a veces tiene un largo fragmento de texto sin espacios. Noté que bajo ciertos tamaños de pantalla, la tabla desbordaría su div principal y crearía una superposición fea con su tabla de hermanos.

Jugué un poco con él y creo que el problema tiene que ver con que el texto no esté espaciado. Creé unjsfiddle Eso demuestra lo que quiero decir.

Como puede ver, la tabla superior izquierda se comporta bien y simplemente crece verticalmente para acomodar más texto. Sin embargo, la tabla inferior izquierda conduce a un desbordamiento a la derecha debido al largo texto sin espacios y la columna derecha de la tabla inferior izquierda termina "debajo" de su hermano.

¿Alguien tiene alguna sugerencia sobre cómo puedo solucionar esto para que el texto muy largo se recorte o se divida parcialmente en una nueva línea?