引导表溢出与长不间断的文本 [英] Bootstrap tables overflowing with long unspaced text

问题描述

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

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

可以看到，顶部最左边的表是行为良好，只是垂直增长以容纳更多的文本。然而，左下表导致右侧溢出，这是由于长的不间断文本，并且左下表的右列卷绕在其兄弟下下。

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

解决方案

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

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

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

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.

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.

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?

解决方案

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.

这篇关于引导表溢出与长不间断的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！