jQuery DataTable overflow and text-wrapping issues

Question

I have the following DataTable  full-width css class sets width   100     lt table class  datatable full-width  gt       lt thead gt           lt th gt LOB lt  th gt           lt th gt Creditor Line 1 lt  th gt           lt th gt Creditor Line 2 lt  th gt           lt th gt Address lt  th gt           lt th gt City lt  th gt           lt th gt State lt  th gt           lt th gt Zip lt  th gt           lt th gt  lt  th gt       lt  thead gt       lt tbody gt                   lt  tbody gt   lt  table gt    Javascript   var profileTable                   datatable   dataTable                    iDisplayLength   25                   bDestroy   true                   bJQueryUI   true                   sPaginationType    full numbers                    bAutoWidth   false                   Everything works fine until there is a record with a long text string   when a record appears with really long text  the data table overflows on the right of the page   See Screenshot Below  the red line is where the page should end  http   i1109 photobucket com albums h430 tbarbedo overflow jpg  Can someone tell me how to either wrap the text in the cells or prevent this overflow issue   I ve tried via  table-layout  fixed    this prevents the overflow but sets all of the columns to the same width   Thanks

User · Answer

You can just use render and wrap your own div or span around it. TD`s are hard to style when it comes to max-width, max-height, etc. Div and span is easy..

See: https://datatables.net/examples/advanced_init/column_render.html

I think a nicer solution then working with CSS hacks which are not supported cross browser.

User · Answer

The following CSS declaration works for me    td-limit       max-width  70px      text-overflow  ellipsis      white-space  nowrap      overflow  hidden

User · Answer

I faced the same problem of text wrapping  solved it by changing the css of table class in DT bootstrap css  I introduced last two css lines table-layout and word-break       table table       clear  both      margin-bottom  6px  important      max-width  none  important      table-layout  fixed      word-break  break-all

User · Answer

Just simply the css style using white-space nowrap works very well to avoid text wrapping in cells  And ofcourse you can use the text-overflow ellipsis and overflow hidden for truncating text with ellipsis effect    lt td style  white-space nowrap  gt Cell Value lt  td gt

User · Answer

The same problem and I solved putting the table between the code   lt div class    table-responsive  gt   lt   div gt

User · Answer

Using the classes  responsive nowrap  on the table element should do the trick

User · Answer

I settled for the limitation  to some people a benefit  of having my rows only one line of text high  The CSS to contain long strings then becomes    datatable td     overflow  hidden     this is what fixes the expansion      text-overflow  ellipsis     not supported in all browsers  but I accepted the tradeoff      white-space  nowrap       edit to add   After using my own code and initially failing  I recognized a second requirement that might help people  The table itself needs to have a fixed layout or the cells will just keep trying to expand to accomodate contents no matter what  If DataTables styles or your own styles don t already do so  you need to set it   table someTableClass     table-layout  fixed     Now that text is truncated with ellipses  to actually  see  the text that is potentially hidden you can implement a tooltip plugin or a details button or something  But a quick and dirty solution is to use JavaScript to set each cell s title to be identical to its contents  I used jQuery  but you don t have to         datatable tbody td   each function index        this     this       var titleVal    this text        if  typeof titleVal      string   amp  amp  titleVal                  this attr  title   titleVal                 DataTables also provides callbacks at the row and cell rendering levels  so you could provide logic to set the titles at that point instead of with a jQuery each iterator  But if you have other listeners that modify cell text  you might just be better off hitting them with the jQuery each at the end   This entire truncation method will ALSO have a limitation you ve indicated you re not a fan of  by default columns will have the same width  I identify columns that are going to be consistently wide or consistently narrow  and explicitly set a percentage-based width on them  you could do it in your markup or with sWidth   Any columns without an explicit width get even distribution of the remaining space   That might seem like a lot of compromises  but the end result was worth it for me

User · Answer

You can try setting the word-wrap however it doesn t work in all browsers yet   Another method would be to add an element around your cell data like this    lt td gt  lt span gt     lt  span gt  lt  td gt    Then add some css like this    datatable td span      max-width  400px      display  block      overflow  hidden

User · Answer

I m way late here  but after reading  Greg Pettit s answer and a couple of blogs or other SO questions I unfortunately can t remember I decided to just make a couple of dataTables plugins to deal with this   I put them on bitbucket in a Mercurial repo  I follwed the fnSetFilteringDelay plugin and just changed the comments and code inside  as I ve never made a plugin for anything before  I made 2  and feel free to use them  contribute to them  or provide suggestions     dataTables TruncateCells - truncates each cell in a column down to a set number of characters  replacing the last 3 with an ellipses  and puts the full pre-truncated text in the cell s title attributed   dataTables BreakCellText - attempts to insert a break character every X  user defined  characters in each cell in the column  There are quirks regarding cells that contain both spaces and hyphens  you can get some weird looking results  like a couple of characters straggling after the last inserted  character   Maybe someone can make that more robust  or you can just fiddle with the breakPos for the column to make it look alright with your data

User · Answer

Try adding td  word-wrap  break-word   to the css and see if it fixes it

[jquery] jQuery DataTable overflow and text-wrapping issues

Examples related to jquery

Examples related to html

Examples related to css

Examples related to asp.net-mvc-3

Examples related to datatables