I'm implementing table inside html, but line break seems not working in items in table.
This is CSS
table {
...
td, th {
padding: 5px 15px 5px 15px;
word-break: break-all;
white-space:nowrap;
}
and HTML
...
<div class="item-box">
<table>
...
<tr>
<td>TD1</td>
<td>
TD2lsneinocnosneonocnsoneoincosneoicnosneocnsoinoiesnioencTD2lsneinocnosneonocnsoneoincosneoicnosneocnsoinoiesnioencTD2lsneinocnosneonocnsoneoincosneoicnosneocnsoinoiesnioenc</td>
<td>TD3</td>
</tr>
...
and it shows like this.

Is there something I'm doing wrong?
word-break is not supported for the moment, you should see a warning about that when using the CLI. I've at least fixed the documentation about that.
As a workaround, you theoretically could use overflow-wrap: break-word instead of word-break: break-all, but it doesn't work for various unrelated reasons:
overflow-wrap: break-word and white-space: nowrap are supposed to work together (currently, white-space: nowrap always avoids wrapping), I have to read the spec,overflow-wrap: break-word doesn't work in tables.I'm renaming the issue according to this last point, which is the real bug currently in WeasyPrint. When this bug is fixed, you'll be able to do what you want in your example.
@liZe Thanks for review! As you mentioned...
overflow-wrap: break-word and white-space: nowrap are not working togetheroverflow-wrap:break-word, it still does not work in table.I'll also look on it. Thanks.
@liZe Oh, it seems breaking word in table works with Pango-1.40.14. I just upgraded in my Mac(Sierra), and it shows well. Thanks for help.
I'll look on bit more, and close this if this causes no other bugs.
Oh, it seems breaking word in table works with Pango-1.40.14.
You're right, looks like there's no problem with overflow-wrap:break-word in tables after all.
@liZe Yes, it seems working fine. I'll close this one.
overflow-wrap:break-word in tables doesn't work for me, too.
Tested with three Pangos: 1.40.11, 1.42.03 and 1.43.00.
No Pango-1.40.14 available.
You'll need to use table-layout: fixed. Automatic table layout always gives cells at least the minimum size of their content without taking care of overflow-wrap:break-word or hyphenation (and I think that it's a good idea, even if it's strange in this case). Other browsers (at least Chrome and Epiphany) give the same rendering as WeasyPrint.
<table style="overflow-wrap: break-word; width: 100px; table-layout: fixed">
<tr>
<td>
TD2lsneinocnosneonocnsoneoincosneoicnosneocnsoinoiesnioencTD2lsneinocnosneonocnsoneoincosneoicnosneocnsoinoiesnioencTD2lsneinocnosneonocnsoneoincosneoicnosneocnsoinoiesnioenc
</td>
</tr>
</table>
Tables as always: special beasts. Indeed, table-layout: fixed does the trick with all of my Pangos.
Most helpful comment
You'll need to use
table-layout: fixed. Automatic table layout always gives cells at least the minimum size of their content without taking care ofoverflow-wrap:break-wordor hyphenation (and I think that it's a good idea, even if it's strange in this case). Other browsers (at least Chrome and Epiphany) give the same rendering as WeasyPrint.