Weasyprint: "overflow-wrap: break-word" not working in table

Created on 16 Nov 2017  路  8Comments  路  Source: Kozea/WeasyPrint

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.
screen shot 2017-11-16 at 20 42 03

Is there something I'm doing wrong?

bug

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 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>

All 8 comments

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:

  • Pango 1.40.13 broke overflow-wrap, it's fixed in 1.40.14,
  • I don't know how 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,
  • for some unknown reason 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 together
  • Though I only used overflow-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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

elcolie picture elcolie  路  4Comments

zopyx picture zopyx  路  5Comments

whitelynx picture whitelynx  路  5Comments

muzzamilkhan picture muzzamilkhan  路  3Comments

ivanprice picture ivanprice  路  3Comments