Forum Bugs

`overflow-wrap: break-word` behaving different from browser

robin
When using, 'overflow-wrap: break-word' it behaves differently inside a browser with the HTML file opened than processed through PrinceXML (15). Tested using Firefox 111.0.1 and Chromium 111.0.5563.146.

Using the following sample code to create a table with some invoice data.

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                width: 612px;
                max-width: 612px;
            }
            table {
                width: 100%;
                border-collapse: collapse;
            }
            th, td {
                border: 1px solid black;
                padding: 5px;
            }
            .amount {
                white-space: nowrap;
            }
            .description {
                overflow-wrap: break-word;
                word-break: normal;
                max-width: 320px;
            }
            .price {
                text-align: right;
                width: auto;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <th></th>
                <th>Description</th>
                <th>Price</th>
            </thead>
            <tbody>
                <tr>
                    <td class="amount">1 x</td>
                    <td class="description">Some text that is long enough to overflow the cell within a reasonable frame of a few hundred pixels.</td>
                    <td class="price">€ 100</td>
                </tr>
                <tr>
                    <td class="amount">2 x</td>
                    <td class="description">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
                    <td class="price">€ 200</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>



The cell with the 'aaaaa's does not get broken in multiple lines, as it does inside the browser. This results in the entire table being wider than the page. Using 'overflow-wrap: break-all` would work, but this also breaks words which don't need to be broken up into smaller pieces as they would fit on a following line and this also breaks at weird points.

'overflow-wrap: anywhere; word-break: normal;' would work perfectly, only problem is that PrinceXML does not support 'overflow-wrap: anywhere;'.

Is this bug in the way that PrinceXML handles breaking words, and how would I work around it?
  1. prince-text-overflow-bug.html1.5 kB
  2. test.pdf37.3 kB
    Output PDF

Edited by robin