Bootstrap表溢出长文本

我正在使用Bootstrap，并且我有一个带有几列的表，其中的最后一列有时会有很长的文本，没有空格。我注意到在某些屏幕尺寸下，该表将溢出其父div，并与其兄弟表产生难看的重叠。

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

如您所见，最左上方的表格行为良好，只是垂直增长即可容纳更多文本。但是，由于较长的无间距文本，左下方的表会导致右侧的溢出，并且左下方的表的右列在其同级的下面。

有人对我如何解决此问题有任何提示，以使很长的文本被剪切或部分分割成新行吗？

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

不推荐使用（即自动换行）

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

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

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

这在不强制固定表布局的情况下起作用，只需将其添加到td或任何其他文件中

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

这些解决方案在Internet Explorer中无法正常工作。

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

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

您可以在CSS下面使用。这将包裹文本并在文本末尾应用...。

例如This_is_a_large_text将更改为This_is_a_lar ...

td {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

您还可以添加工具提示以显示完整的文本值。

<td data-toggle="tooltip" title="${text}">${text}</td>

阿尔伯斯的回答对我有用

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

在JS中加载它动态添加

 $("#"  + tableName ).addClass('the-table'); 

希望能帮助到你！！