Bootstrap 表溢出长的无空格文本答案

【问题标题】：Bootstrap tables overflowing with long unspaced textBootstrap 表溢出长的无空格文本
【发布时间】：2012-08-25 02:21:40
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

仅供参考，在弃用自动换行的地方阅读，使用 over-flow:break-word
@unidha 我认为你错了。您可以查看working draft 或editor's draft。 over-flow 属性不存在。我们正在谈论的属性被命名为overflow-wrap 或word-wrap 作为备用。你能提供你的来源吗？
那篇文章只是证实了我所说的。它没有提到over-flow 属性。我想你看错了。
好像我误读了这句话'溢出换行属性是现在过时的自动换行属性的替代品'
但这会迫使您使用固定布局。当表格达到容器的宽度并且其他列不能再缩小时，为什么它不能停止扩展列？

【解决方案2】：

阿尔伯斯的回答对我有用

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

在JS中动态加载它添加

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

希望对你有帮助！！

【讨论】：

【解决方案3】：

这些解决方案在 Internet Explorer 中运行时遇到问题。

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：