引导表溢出与长未占用的文本

我使用的是Bootstrap，我有一个有几列的表格，最后一个列表有时会有一长串文字没有空格。我注意到，在某些屏幕尺寸下，表格会溢出其父div，并创build丑陋的兄弟表重叠。

我玩了这个，我认为这个问题与文本没有空格有关。我创build了一个jsfiddle来演示我的意思。

正如你所看到的，最左上angular的表格performance良好，只是垂直增长以容纳更多的文字。然而，左下方的桌子由于长的没有间隔的文字而导致右边的溢出，而左下方的桌子右边的栏杆在其兄弟姐妹“下”。

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

将以下样式添加到<table>

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

然后你可以通过CSS调整你的布局。

这工作没有强制表格布局被固定只要将其添加到td或任何

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

我在使用Internet Explorer的这些解决scheme时遇到了麻烦。

我用下面的样式来最终工作。

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