jQuery DataTable 溢出和文本换行问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8058109/
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
jQuery DataTable overflow and text-wrapping issues
提问by thiag0
I have the following DataTable (full-width css class sets width = 100%)
我有以下数据表（全宽 css 类设置宽度 = 100%）
<table class="datatable full-width">
<thead>
<th>LOB</th>
<th>Creditor Line 1</th>
<th>Creditor Line 2</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
<th></th>
</thead>
<tbody>
...
</tbody>
</table>
Javascript:
Javascript：
var profileTable =
$(".datatable").dataTable({
"iDisplayLength": 25,
"bDestroy": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": false
});
Everything works fine until there is a record with a long text string...when a record appears with really long text, the data table overflows on the right of the page. (See Screenshot Below, the red line is where the page should end) http://i1109.photobucket.com/albums/h430/tbarbedo/overflow.jpg
一切正常，直到出现带有长文本字符串的记录......当出现带有非常长文本的记录时，数据表会在页面右侧溢出。（见下面的截图，红线是页面应该结束的地方） http://i1109.photobucket.com/albums/h430/tbarbedo/overflow.jpg
Can someone tell me how to either wrap the text in the cells or prevent this overflow issue?
有人可以告诉我如何将文本包裹在单元格中或防止此溢出问题吗？
I've tried via 'table-layout: fixed'...this prevents the overflow but sets all of the columns to the same width.
我已经尝试过通过 'table-layout: fixed'...这可以防止溢出但将所有列设置为相同的宽度。
Thanks
谢谢
回答by Greg Pettit
I settled for the limitation (to some people a benefit) of having my rows only one line of text high. The CSS to contain long strings then becomes:
我解决了我的行只有一行文本高的限制（对某些人来说是一种好处）。包含长字符串的 CSS 将变为：
.datatable td {
overflow: hidden; /* this is what fixes the expansion */
text-overflow: ellipsis; /* not supported in all browsers, but I accepted the tradeoff */
white-space: nowrap;
}
[edit to add:] After using my own code and initially failing, I recognized a second requirement that might help people. The table itself needs to have a fixed layout or the cells will just keep trying to expand to accomodate contents no matter what. If DataTables styles or your own styles don't already do so, you need to set it:
[编辑添加：] 在使用我自己的代码并最初失败后，我认识到可能对人们有所帮助的第二个要求。表格本身需要有固定的布局，否则无论如何单元格都会不断尝试扩展以容纳内容。如果 DataTables 样式或您自己的样式还没有这样做，您需要设置它：
table.someTableClass {
table-layout: fixed
}
Now that text is truncated with ellipses, to actually "see" the text that is potentially hidden you can implement a tooltip plugin or a details button or something. But a quick and dirty solution is to use JavaScript to set each cell's title to be identical to its contents. I used jQuery, but you don't have to:
现在文本被省略号截断，要真正“看到”可能隐藏的文本，您可以实现工具提示插件或详细信息按钮或其他东西。但是一个快速而肮脏的解决方案是使用 JavaScript 将每个单元格的标题设置为与其内容相同。我使用了 jQuery，但您不必：
$('.datatable tbody td').each(function(index){
$this = $(this);
var titleVal = $this.text();
if (typeof titleVal === "string" && titleVal !== '') {
$this.attr('title', titleVal);
}
});
DataTables also provides callbacks at the row and cell rendering levels, so you could provide logic to set the titles at that point instead of with a jQuery.eachiterator. But if you have other listeners that modify cell text, you might just be better off hitting them with the jQuery.eachat the end.
DataTables 还提供行和单元格渲染级别的回调，因此您可以提供逻辑以在该点设置标题而不是使用jQuery.each迭代器。但是，如果您有其他修改单元格文本的侦听器，则最好jQuery.each在最后敲击它们。
This entire truncation method will ALSO have a limitation you've indicated you're not a fan of: by default columns will have the same width. I identify columns that are going to be consistently wide or consistently narrow, and explicitly set a percentage-based width on them (you could do it in your markup or with sWidth). Any columns without an explicit width get even distribution of the remaining space.
整个截断方法也会有一个限制，你已经表明你不喜欢：默认情况下，列将具有相同的宽度。我确定将始终宽或始终窄的列，并在其上明确设置基于百分比的宽度（您可以在标记中或使用 sWidth 进行设置）。任何没有明确宽度的列都会得到剩余空间的均匀分布。
That might seem like a lot of compromises, but the end result was worth it for me.
这似乎是很多妥协，但最终结果对我来说是值得的。
回答by Mukesh Salaria
The following CSS declaration works for me:
以下 CSS 声明适用于我：
.td-limit {
max-width: 70px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
回答by David Gallagher
You can try setting the word-wraphowever it doesn't work in all browsers yet.
您可以尝试设置 ，word-wrap但是它还不适用于所有浏览器。
Another method would be to add an element around your cell data like this:
另一种方法是在您的单元格数据周围添加一个元素，如下所示：
<td><span>...</span></td>
Then add some css like this:
然后像这样添加一些css：
.datatable td span{
max-width: 400px;
display: block;
overflow: hidden;
}
回答by Lucky
Just simply the css style using white-space:nowrapworks very well to avoid text wrapping in cells. And ofcourse you can use the text-overflow:ellipsisand overflow:hiddenfor truncating text with ellipsis effect.
只需简单地使用 css 样式就white-space:nowrap可以很好地避免单元格中的文本换行。当然，您可以使用text-overflow:ellipsis和overflow:hidden截断具有省略号效果的文本。
<td style="white-space:nowrap">Cell Value</td>
回答by César Augusto
The same problem and I solved putting the table between the code
同样的问题，我解决了将表格放在代码之间
<div class = "table-responsive"> </ div>
回答by Harish Lalwani
I faced the same problem of text wrapping, solved it by changing the css of table class in DT_bootstrap.css. I introduced last two css lines table-layout and word-break.
我遇到了同样的文本换行问题，通过更改 DT_bootstrap.css 中 table 类的 css 解决了它。我介绍了最后两行 css 行 table-layout 和 word-break。
table.table {
clear: both;
margin-bottom: 6px !important;
max-width: none !important;
table-layout: fixed;
word-break: break-all;
}
回答by JustinP8
I'm way late here, but after reading @Greg Pettit's answer and a couple of blogs or other SO questions I unfortunately can't remember I decided to just make a couple of dataTables plugins to deal with this.
我来晚了，但在阅读了@Greg Pettit 的回答和一些博客或其他 SO 问题后，我很遗憾不记得我决定只制作几个 dataTables 插件来处理这个问题。
I put them on bitbucket in a Mercurial repo. I follwed the fnSetFilteringDelayplugin and just changed the comments and code inside, as I've never made a plugin for anything before. I made 2, and feel free to use them, contribute to them, or provide suggestions.
我将它们放在 Mercurial 存储库中的 bitbucket 上。我关注了fnSetFilteringDelay插件，只是更改了里面的注释和代码，因为我以前从未为任何东西制作过插件。我做了 2，可以随意使用它们，为它们做出贡献，或提供建议。
dataTables.TruncateCells- truncates each cell in a column down to a set number of characters, replacing the last 3 with an ellipses, and puts the full pre-truncated text in the cell's title attributed.
dataTables.BreakCellText- attempts to insert a break character every X, user defined, characters in each cell in the column. There are quirks regarding cells that contain both spaces and hyphens, you can get some weird looking results (like a couple of characters straggling after the last inserted
character). Maybe someone can make that more robust, or you can just fiddle with the breakPos for the column to make it look alright with your data.
dataTables.TruncateCells- 将列中的每个单元格截断为一定数量的字符，用省略号替换最后 3 个，并将完整的预截断文本放在单元格的标题中。
dataTables.BreakCellText- 尝试在列中的每个单元格中的每个用户定义的 X 字符中插入一个中断字符。关于同时包含空格和连字符的单元格有一些怪癖，你可能会得到一些奇怪的结果（比如在最后一个插入的
字符之后散乱的几个字符）。也许有人可以使它更健壮，或者您可以只是摆弄该列的 breakPos 以使其与您的数据看起来不错。
回答by ScottS
Try adding td {word-wrap: break-word;}to the css and see if it fixes it.
尝试添加td {word-wrap: break-word;}到 css 中，看看它是否修复了它。
回答by user1281146
You can just use render and wrap your own div or span around it. TD`s are hard to style when it comes to max-width, max-height, etc. Div and span is easy..
您可以只使用渲染并在其周围包裹您自己的 div 或 span。当涉及到最大宽度、最大高度等时，TD 很难设计样式。 Div 和 span 很容易。
See: https://datatables.net/examples/advanced_init/column_render.html
请参阅：https: //datatables.net/examples/advanced_init/column_render.html
I think a nicer solution then working with CSS hacks which are not supported cross browser.
我认为一个更好的解决方案是使用不支持跨浏览器的 CSS hack。
回答by Ryan
Using the classes "responsive nowrap" on the table element should do the trick.
在表格元素上使用“响应式 nowrap”类应该可以解决问题。
