Word break, break word...

Hendrik_S

Just for understanding reasons, i have the following question. Imagine using DataTables with all the default options and responsive to true.

I added the following css rule:

table.dataTable td {
word-break: break-word;
}

You can see the fiddle here: https://jsfiddle.net/MaartenB/zmv1vgkn/

Break-word is working in this example, but i don't understand why? I made another fiddle with just a non-DataTables table:

https://jsfiddle.net/MaartenB/2L91dL7e/2/

Table width: 100%
Table layout: auto (default for table-layout)
And again i put "word-break: break-word;" on the td's

In this case breaking the word is not working, so when i was doing tests with DataTables i was surprised that it was working. It's not what you would expect if you understand normal html / css tables.

Can anyone explain me why this is working with DataTables, because apparently now i don't understand the working of DataTables in this case.

Hendrik_S

By the way...i tested it in Chrome, but IE is showing it as expected. So in a case like this there is different behavior of DataTables in different browsers.

I also did a test with DataTables and "table-layout: fixed;", but then in combination with the reponsive mode it's a mess. So i think you can not really use DataTables / responsive mode in combination with table-layout: fixed?

I think the only way now to break long words is to write a custom function for DataTables...the same way like the ellipsis function?

allan

So i think you can not really use DataTables / responsive mode in combination with table-layout: fixed?

I don't believe it can. The fixed layout option has not been extensively tested with DataTables yet.

Regarding the word break - it isn't something that is being done by DataTables Javascript: https://jsfiddle.net/zmv1vgkn/2/ .

I've tried to replicate the CSS but unsuccessfully so far. It would need a bit more time to discover exactly what the difference is.

Allan

Hendrik_S

I'll also put some more time on it later on. Then i will let it know here. Actually i wanted to do the tests with: "word-wrap: break-word;", but i used: "word-break: break-word;".

But usually with normal tables, it maybe seems easy to understand "word-wrap: break-word;", but i put a lot of hours in it to understand it a bit ;). With "table-layout: auto;" there is no easy way to break the word. Putting a width (% or px) on the table or table cells will have no effect! The long word is just overruling those widths.

So the only way to break words in tables with html / css and (without wrappers or something) is to use "table-layout: fixed;". But that in combination with "width: auto" is also not working...even if you put a width on the "table cell" where you want to use: "word-wrap: break-word;".

So the only way to break word in tables with html / css is to use "table-layout: fixed;", but then the width of the table must not be "auto", but a percentage or px for example.

That's why i usually prefer tables in combination with "table-layout: fixed". There is one more advantage...with "table-layout: auto" the browser first has to go through all the content in the table and at the end the browser can show the result. With "fixed" the browser can start showing the table immidiately.

The only thing with "table-layout: fixed" is that the column width is NOT set by the widest unbreakable content in the cells. With "table-layout: auto" it is.