CSS Bootstrap 表中充满了无间距的长文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12195469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap tables overflowing with long unspaced text
提问by Richard Bender
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 jsfiddlethat 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?
有没有人对我如何解决这个问题有任何提示，以便将很长的文本剪切或部分拆分到新行上？
回答by albertedevigo
.the-table {
table-layout: fixed;
word-wrap: break-word;
}
Deprecated (i.e. word-wrap)
已弃用（即自动换行）
Add the following styles to your <table>
将以下样式添加到您的 <table>
.the-table {
table-layout: fixed;
over-flow: break-word;
}
Then you can adjust your layout via-CSS as you wish.
然后您可以根据需要通过 CSS 调整布局。
回答by Kate Kasinskaya
This works without forcing table layout to be fixed Just add it to td or any
这在不强制固定表格布局的情况下工作只需将其添加到 td 或任何
.is-breakable {
word-break: break-word;
}
回答by Justin Ipson
I was having trouble with these solutions working in Internet Explorer.
我在 Internet Explorer 中使用这些解决方案时遇到了问题。
I used the following style to get it to finally work.
我使用以下样式使其最终工作。
<td style="word-break: break-all">
回答by Saurabh Valsangkar
Albers answer did the trick for me
阿尔伯斯的回答对我有用
.the-table {
table-layout: fixed;
word-wrap: break-word;
}
In the JS to load it dynamically add
在JS加载它动态添加
$("#" + tableName ).addClass('the-table');
Hope it helps!!
希望能帮助到你！！
回答by Rahul Godara
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>
