Prevent text to overrun inside modal

Question

I have an issue regarding about modal when a table data contain huge texts it will overrun outside. I also used datatables from here.

See Image below:

I know I can move the long text to new ling by using word-wrap:break-word; but how can I add the class? Also Is there a way I can change the modal size?

Code that displays the modal:

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

Try this

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

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

UPDATED

I add class called 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'
            } )
        }
    }
    } );
} );

then

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

You can also make custom modal. Detail is here

Answer 2

You can access the item by selecting the path in the generated modal's table like this (according to the similar example on the DataTables website):

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

With break-words it would show the data on more than one line. Another option would be to simply hide the overflowing part

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

Or have it automatically shorten and add an ... ellipsis to the string.

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

To make the modal wider, you can select for

.modal-dialog {
    width: 90vw;
}

That makes the model 90% of the screen width and centers it.

Add these <style>s after the import <link> for Bootstrap, so it doesn't get overwritten by the imported styles.

---

To play with the properties yourself, go to your table and open a modal. Then right click it and (in Chrome/Chromium) select Inspect.

You can edit the style properties directly in the live HTML of the Inspect view. Right click an element in the HTML and select "Add Attribute" to add the style attribute and give it the style you want to test.