Bootstrap表溢出了长不间隔的文本

Question

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

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

正如您所看到的,最左上方的表格表现良好,只是垂直增长以容纳更多文本.但是,由于长文本没有空格,左下方的表格导致右侧溢出,左下方表格的右列在其兄弟的"下方"处蜿蜒.

有没有人有任何关于我如何解决这个问题的提示,以便将很长的文本剪切或部分拆分到新的一行？

Answer 1

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

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

然后,您可以根据需要通过CSS调整布局.

Answer 2

这可以在不强制固定表格布局的情况下工作只需将其添加到td或任何

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

Answer 3

我在 Internet Explorer 中使用这些解决方案时遇到了问题。

我使用以下样式使其最终工作。

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