引导表充满了长而不间隔的文本。

I'm using Bootstrap and I have a table with a few columns, the last of which sometimes has a long piece of text without spaces. I noticed that under certain screen sizes, the table would overflow its parent div and create ugly overlapping with its sibling table.

我使用Bootstrap，我有一个表，其中有几个列，最后一个列有时有一段没有空格的文本。我注意到，在某些屏幕大小下，表会溢出其父div，并与它的兄弟表产生难看的重叠。

I played around with it and I think the problem has to do with the text being unspaced. I created a jsfiddle that demonstrates what I mean.

我用它来玩，我觉得这个问题和文本的不间隔有关。我创建了一个jsfiddle，它展示了我的意思。

As you can see, the top leftmost table is well behaved and simply grows vertically to accommodate more text. However, the bottom left table leads to an overflow on the right due to the long unspaced text and the right column of the bottom left table winds up "under" its sibling.

正如您所看到的，左上角的表表现良好，只是垂直增长以容纳更多的文本。然而，左下表会导致右上的溢出，这是由于长时间的不间隔文本，而左下表的右列最后会在“它的兄弟表”下结束。

Does anyone have any tips on how I can fix this so that the very long text gets clipped or partially split onto a new line?

有没有人能告诉我如何修正这个问题，让很长的文字被剪下来或者部分地分割成一行?

4 个解决方案

#1

113

Add the following styles to your <table>

将以下样式添加到

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

Then you can adjust your layout via-CSS as you wish.

然后你可以根据你的意愿调整你的布局。

#2

This works without forcing table layout to be fixed Just add it to td or any

这可以在不强制表布局的情况下将其添加到td或any中。

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

#3

I was having trouble with these solutions working in Internet Explorer.

我在使用ie时遇到了这些问题。

I used the following style to get it to finally work.

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

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

#4

You can use below css. This will wrap the text and apply ... in the end of the text.

您可以在css下面使用。这将包装文本并应用…在课文的最后。

e.g. This_is_a_large_text will be changed to This_is_a_lar...

例:This_is_a_large_text将改为This_is_a_lar…

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

You can also add tool tip to show the complete text value.

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

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

#1

113