css - Bootstrap 表溢出长的无空格文本

Question

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

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

如您所见，最左上角的表格表现良好，并且只是垂直增长以容纳更多文本。但是，由于较长的未加空格的文本，左下表导致右侧溢出，并且左下表的右列在其兄弟“下方”结束。

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

score 130 · Accepted Answer

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

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

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

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

score 26 · Accepted Answer

这无需强制固定表格布局即可工作只需将其添加到 td 或任何

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

score 6 · Accepted Answer

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

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

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

score 1 · Accepted Answer

你可以使用下面的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>

score 0 · Accepted Answer

阿尔伯斯的回答对我有用

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

在JS中动态加载它添加

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

希望能帮助到你！！

5 回答 5