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">

Answer 4

您可以使用以下css。这将包装文本并在文本的末尾应用....

e.g。 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>