jquery - 防止文本在模式内溢出

Question

我有一个关于模态的问题，当表数据包含大量文本时，它会超出范围。我还使用了 here. 中的数据表

参见下图:

我知道我可以使用 word-wrap:break-word; 将长文本移动到新的 ling，但是如何添加该类？另外有没有办法可以改变模态大小？

显示模态的代码:

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'
    })
   }
  }

fiddle here

Answer 1

试试这个

.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