twitter-bootstrap 引导响应表内容包装
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21587813/
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 responsive table content wrapping
提问by prmph
I have HTML similar to this:
我有类似这样的 HTML：
<div class="table-responsive">
<table class="table borderless">
<caption>
<h3>Announcements</h3>
</caption>
<tbody>
<tr >
<td>
If you are waiting for your certificate from your trainer, please contact them. Our turnaround time is between 1-2 months from the time we receive your details from your trainer, which we expect to be at the start of your program. The remainder is dependent upon how quickly your trainer has send in all the required paperwork and made payment, etc.
</td>
</tr>
</tbody>
</table>
</div>
When I view the output in a small view-port, the table is re-sized properly, but the paragraph content in the table cells are not wrapped, so scroll-bars are shown. I expected the responsive behavior would have been to wrap the paragraph content. How do I achieve this?
当我在一个小的视口中查看输出时，表格会被正确调整大小，但表格单元格中的段落内容没有被换行，所以会显示滚动条。我预计响应行为将是包装段落内容。我如何实现这一目标？
采纳答案by Dave Friedel
I ran across the same issue you did but the above answers did not solve my issue. The only way I was able to resolve it - was to make a class and use specific widths to trigger the wrapping for my specific use case. As an example, I provided a snippet below - but I found you will need to adjust it for the table in question - since I typically use multiple colspans depending on the layout. The reasoning I believe Bootstrap is failing - is because it removes the wrapping constraints to get a full table for the scrollbars. THe colspan must be tripping it up.
我遇到了与您相同的问题，但上述答案并没有解决我的问题。我能够解决它的唯一方法是创建一个类并使用特定的宽度来触发我的特定用例的包装。例如，我在下面提供了一个片段 - 但我发现您需要针对相关表格对其进行调整 - 因为我通常会根据布局使用多个 colspan。我认为 Bootstrap 失败的原因是它删除了包装约束以获得滚动条的完整表格。colspan 一定是绊倒了它。
<style>
@media (max-width: 768px) { /* use the max to specify at each container level */
.specifictd {
width:360px; /* adjust to desired wrapping */
display:table;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
}
I hope this helps
我希望这有帮助
回答by UberNeo
just simply use as below and it will word wrap any long text within a table . No need to anything else
只需简单地使用如下，它就会自动换行表格中的任何长文本。不需要别的
<td style="word-wrap: break-word;min-width: 160px;max-width: 160px;">long long comments</td>
回答by user2195058
So you can use the following :
所以你可以使用以下内容：
td {
white-space: normal !important; // To consider whitespace.
}
If this doesn't work:
如果这不起作用：
td {
white-space: normal !important;
word-wrap: break-word;
}
table {
table-layout: fixed;
}
回答by Buksy
The behaviour is on purpose:
该行为是故意的：
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices(under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
通过将任何 .table 包装在 .table-responsive 中来创建响应式表格，使它们在小型设备（768px 以下）上水平滚动。在宽度大于 768 像素的任何物体上查看时，您将看不到这些表格中的任何差异。
Which means tables are responsive by default (are adjusting their size). But only if you wish to not break your table's lines and add scrollbar when there is not enough room use .table-responsiveclass.
这意味着表格默认是响应式的（正在调整它们的大小）。但前提是您不希望打破表格的线条并在没有足够的空间使用.table-responsive等级时添加滚动条。
If you take a look at bootstrap's sourceyou will notice there is media query that only activates on XSscreen size and it sets text of table to white-space: nowrapwhich causes it to not breaking.
如果您查看bootstrap 的源代码，您会注意到媒体查询仅在XS屏幕大小上激活，并且它将表格文本设置为white-space: nowrap使其不会中断。
TL;DR; Solution
TL; 博士; 解决方案
Simply remove .table-responsiveelement/class from your html code.
只需.table-responsive从您的 html 代码中删除元素/类。
回答by lozadaOmr
EDIT
编辑
I think the reason that your table is not responsive to start with was you did not wrap in .container, .rowand .col-md-xclasses like this one
我认为您的表一开始没有响应的原因是您没有换行.container，.row而.col-md-x像这样的类
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- or use any other number .col-md- -->
<div class="table-responsive">
<div class="table">
</div>
</div>
</div>
</div>
</div>
With this, you can still use <p>tags and even make it responsive.
有了这个，您仍然可以使用<p>标签，甚至使其具有响应性。
Please see the Bootply example here
请在此处查看 Bootply 示例
回答by JavocSoft
The UberNeo response is Ok and i like it because you do not have to modify anything else except the TD. The only point is that you also have to add "white-space:normal" to the style in order to maintain the responsive characteristics of the table, if not, at certain resolutions the wrap is not made and the scroll of the table does not appear.
UberNeo 的响应很好，我喜欢它，因为除了 TD 之外，您无需修改任何其他内容。唯一的一点是您还必须在样式中添加“white-space:normal”以保持表格的响应特性，如果没有，则在某些分辨率下不会进行换行并且不会进行表格的滚动出现。
style="word-wrap: break-word;min-width: 160px;max-width: 160px;white-space:normal;"
回答by Manish Kumar
Fine then. You can use CSS word wrap property. Something like this :
那就好。您可以使用 CSS 自动换行属性。像这样的事情：
td.test /* Give whatever class name you want */
{
width:11em; /* Give whatever width you want */
word-wrap:break-word;
}
回答by Keith Chiah
.table td.abbreviation {
max-width: 30px;
}
.table td.abbreviation p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<table class="table">
<tr>
<td class="abbreviation"><p>ABC DEF</p></td>
</tr>
</table>回答by Vishal Sharma
Add your new class "tableresp" with table-responisve class and then add below code in your js file
使用 table-responisve 类添加新类“tableresp”，然后在 js 文件中添加以下代码
$(".tableresp").on('click', '.dropdown-toggle', function(event) {
if ($('.dropdown-menu').length) {
var elm = $('.dropdown-menu'),
docHeight = $(document).height(),
docWidth = $(document).width(),
btn_offset = $(this).offset(),
btn_width = $(this).outerWidth(),
btn_height = $(this).outerHeight(),
elm_width = elm.outerWidth(),
elm_height = elm.outerHeight(),
table_offset = $(".tableresp").offset(),
table_width = $(".tableresp").width(),
table_height = $(".tableresp").height(),
tableoffright = table_width + table_offset.left,
tableoffbottom = table_height + table_offset.top,
rem_tablewidth = docWidth - tableoffright,
rem_tableheight = docHeight - tableoffbottom,
elm_offsetleft = btn_offset.left,
elm_offsetright = btn_offset.left + btn_width,
elm_offsettop = btn_offset.top + btn_height,
btn_offsetbottom = elm_offsettop,
left_edge = (elm_offsetleft - table_offset.left) < elm_width,
top_edge = btn_offset.top < elm_height,
right_edge = (table_width - elm_offsetleft) < elm_width,
bottom_edge = (tableoffbottom - btn_offsetbottom) < elm_height;
console.log(tableoffbottom);
console.log(btn_offsetbottom);
console.log(bottom_edge);
console.log((tableoffbottom - btn_offsetbottom) + "|| " + elm_height);
var table_offset_bottom = docHeight - (table_offset.top + table_height);
var touchTableBottom = (btn_offset.top + btn_height + (elm_height * 2)) - table_offset.top;
var bottomedge = touchTableBottom > table_offset_bottom;
if (left_edge) {
$(this).addClass('left-edge');
} else {
$('.dropdown-menu').removeClass('left-edge');
}
if (bottom_edge) {
$(this).parent().addClass('dropup');
} else {
$(this).parent().removeClass('dropup');
}
}
});
var table_smallheight = $('.tableresp'),
positioning = table_smallheight.parent();
if (table_smallheight.height() < 320) {
positioning.addClass('positioning');
$('.tableresp .dropdown,.tableresp .adropup').css('position', 'static');
} else {
positioning.removeClass('positioning');
$('.tableresp .dropdown,.tableresp .dropup').css('position', 'relative');
}
回答by user7300940
use it in css external file.
在 css 外部文件中使用它。
.td-table
{
word-wrap: break-word;
word-break: break-all;
white-space: normal !important;
text-align: justify;
}
