css – Bootstrap表溢出与长的不间断的文本

我使用Bootstrap，我有一个表有几列，最后一个有时有一个长的文本没有空格。我注意到，在某些屏幕尺寸下，表将溢出其父div，并创建丑陋的重叠与其兄弟表。

我玩弄了它，我认为问题与文本没有空间。我创建了一个jsfiddle，演示了我的意思。

正如你所看到的，最左边的表格行为很好，只是垂直增长以容纳更多的文本。然而，左下表导致右侧溢出，这是由于长的不间断文本，并且左下表的右列卷绕在其兄弟下“下”。

有人有任何提示，如何我可以解决这个问题，以便非常长的文本被剪辑或部分拆分到一个新行？

解决方法

将以下样式添加到您的< table>

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

然后你可以根据需要通过CSS调整布局。