Question

当表格数据包含巨大的文本时，我会遇到关于模态的问题。我还使用了来自here.

的数据表

见下图：

我知道我可以使用word-wrap:break-word;将长文本移动到新版本但是如何添加该类？还有一种方法可以改变模态尺寸吗？

显示模态的代码：

responsive: {
   details: {
    display: $.fn.dataTable.Responsive.display.modal( {
        header: function ( row ) {
            var data = row.data();
            return 'Details for '+data['first_name']+' '+data['last_name'];
        }
    } ),
    renderer: $.fn.dataTable.Responsive.renderer.tableAll({
     tableClass: 'table'
    })
   }
  }

小提琴here

Answer 1

您可以通过选择生成的模式表中的路径来访问该项目（根据DataTables website上的类似示例）：

.modal-body > table > tbody > tr:last-child > td:last-child {
    overflow-wrap: break-words;
}

使用break-words，它会在多行上显示数据。另一种选择是简单地隐藏溢出的部分

.modal-body > table > tbody > tr:last-child > td:last-child {
    overflow: hidden;
}

或者让它自动缩短并在字符串中添加...省略号。

.modal-body > table > tbody > tr:last-child > td:last-child {
    text-overflow: ellipsis;
}

要使模态更宽，您可以选择

.modal-dialog {
    width: 90vw;
}

这使得模型的屏幕宽度为90％并居中。

在导入<style>之后为Bootstrap添加这些<link> s ，因此它不会被导入的样式覆盖。

要自己玩这些属性，请转到桌面并打开模态。然后右键单击它并（在Chrome / Chromium中）选择 Inspect 。

您可以直接在 Inspect 视图的实时HTML中编辑样式属性。右键单击HTML中的元素，然后选择＆＃34;添加属性＆＃34; 以添加style属性，并为其指定要测试的样式。

Answer 2

试试这个

.modal-body table
{
  table-layout: fixed;
}

.modal-body table td
{
  word-wrap:break-word
}

<强>已更新

我添加了名为 myDetailClass

的类

$(document).ready(function() {
$('#example').DataTable( {
    responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.modal( {
                header: function ( row ) {
                    var data = row.data();
                    return 'Details for '+data[0]+' '+data[1];
                }
            } ),
            renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
                tableClass: 'table myDetailClass'
            } )
        }
    }
    } );
} );

然后

.myDetailClass
{
  table-layout: fixed;
  word-wrap:break-word;
}

您还可以制作自定义模式。细节是here

防止文本在模态内溢出

2 个答案: