DataTables server side with scroller formatting error

Question

I've started using DataTables with Scroller function and encountered the following "bug". If there is a really long field (mine is for example stack trace) and scroller (virtual loading) is enabled, table will expand horizontal so that X scroller is visible. How can i prevent that and make DataTables wrap long data set in grid?

Note: If i disable Scroller functionality there is no X scroller and stack trace is formated normally.

With scroller addon fiddle

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>First name</th>
            <th>Last name</th>
            <th>ZIP / Post code</th>
            <th>Country</th>
        </tr>
    </thead>
</table>

$(document).ready(function() {
$('#example').DataTable( {
    serverSide: true,
    ordering: false,
    searching: false,
    ajax: function ( data, callback, settings ) {
        var out = [];

        for ( var i=data.start, ien=data.start+data.length ; i<ien ; i++ ) {
            out.push( [ i+'-10000000000000000 gggggggggdfgdfgdf werwerwerwerwer wewrwewwwwwerwerwerw.erwerwerwe werwwwwwwwwwwwerwe .werrrrrrrrrrrrrrwer23r werwwwwwwwwww', i+'-20', i+'-3', i+'-4', i+'-5' ] );
        }

        setTimeout( function () {
            callback( {
                draw: data.draw,
                data: out,
                recordsTotal: 5000000,
                recordsFiltered: 5000000
            } );
        }, 50 );
    },
    scrollY: 200,
    scroller:{
        loadingIndicator: true
    }
} );
} );

Without scroller addon fiddle

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>First name</th>
            <th>Last name</th>
            <th>ZIP / Post code</th>
            <th>Country</th>
        </tr>
    </thead>
</table>

$(document).ready(function() {
$('#example').DataTable( {
    serverSide: true,
    ordering: false,
    searching: false,
    ajax: function ( data, callback, settings ) {
        var out = [];

        for ( var i=data.start, ien=data.start+data.length ; i<ien ; i++ ) {
            out.push( [ i+'-10000000000000000 gggggggggdfgdfgdf werwerwerwerwer wewrwewwwwwerwerwerw.erwerwerwe werwwwwwwwwwwwerwe .werrrrrrrrrrrrrrwer23r werwwwwwwwwww', i+'-20', i+'-3', i+'-4', i+'-5' ] );
        }

        setTimeout( function () {
            callback( {
                draw: data.draw,
                data: out,
                recordsTotal: 5000000,
                recordsFiltered: 5000000
            } );
        }, 50 );
    }

} );
} );

Answer 1

For some peculiar reason scroller.dataTables.min.css has white-space: nowrap; set.

To enable wordwrap (in the first column as the fiddle suggest) :

.dataTables_scrollBody td:nth-child(1) {
    max-width: 100px;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all; 
}

word-break: break-all; could seem redundant, but it ensures more uniform word wrapping. Without break-all, and if you have a long continuous string, word wrap tends to wrap in odd places giving an ugly result.

You could also cut long strings off and show an ellipsis :

.dataTables_scrollBody td:nth-child(1) {
    max-width: 100px;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

updated fiddle with both examples -> https://jsfiddle.net/vrtL736g/4/