我有与此类似的 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>
当我在小视口中查看输出时，表格会正确调整大小，但表格单元格中的段落内容不会换行，因此会显示滚动条。我预计响应行为会包裹段落内容。我该如何实现这一目标？
只需简单地使用如下所示，它就会自动换行表格中的任何长文本。不需要别的
<td style="word-wrap: break-word;min-width: 160px;max-width: 160px;">long long comments</td>
因此您可以使用以下内容：
td {
white-space: normal !important; // To consider whitespace.
}
如果这不起作用：
td {
white-space: normal !important;
word-wrap: break-word;
}
table {
table-layout: fixed;
}
我遇到了与您相同的问题，但上述答案没有解决我的问题。我能够解决这个问题的唯一方法是创建一个类并使用特定的宽度来触发我的特定用例的包装。作为示例，我在下面提供了一个片段 - 但我发现您需要针对相关表格调整它 - 因为我通常根据布局使用多个 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+ */
}
}
我希望这有帮助
该行为是故意的：
通过将任何 .table 包装在 .table-responsive 中来创建响应式表格使它们在小型设备上水平滚动（768px 以下）。当查看宽度大于 768 像素的任何内容时，您不会在这些表格中看到任何差异。
这意味着表格默认是响应式的（正在调整其大小）。但前提是您希望在没有足够空间时不破坏表格线条并添加滚动条，请使用
.table-responsive如果您查看 bootstrap 的源代码，您会注意到有一个媒体查询仅在 XS 屏幕尺寸上激活，并将表格文本设置为
white-space: nowrap只需从 html 代码中删除
.table-responsive编辑
我认为你的桌子一开始没有响应的原因是你没有包装像这样的
.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>
有了这个，您仍然可以使用
<p>请参阅 Bootply 示例此处
UberNeo 的回复是好的，我喜欢它，因为除了 TD 之外，你不需要修改任何其他内容。唯一的一点是，您还必须在样式中添加“white-space:normal”，以保持表格的响应特性，如果没有，在某些分辨率下，不会进行换行，表格也不会滚动出现。
style="word-wrap: break-word;min-width: 160px;max-width: 160px;white-space:normal;"
.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>那么好吧。您可以使用 CSS 自动换行属性。像这样的东西：
td.test /* Give whatever class name you want */
{
width:11em; /* Give whatever width you want */
word-wrap:break-word;
}
在 css 外部文件中使用它。
.td-table
{
word-wrap: break-word;
word-break: break-all;
white-space: normal !important;
text-align: justify;
}
就这样做
style="word-wrap: break-word min-width:; max-width:;"width在 bootstrap 5 及以上版本中：
2024 年 3 月 5 日 下午 4:20文字现在可以正常换行。
使用 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');
}