Search code examples
html2pdf

html2pdf: overflow:hidden does not seem to work

I have text to output into cells, text might be too long, in this case I'd like the overflow to be simply hidden.
The version tested is html2pdf v. 5.2.2 .
I can't find doc about which CSS is recognised and which is not.
Instead I found in /src/Parsing/Css.php code that seems to imply that "overflow" is recognised at least for values "visible" and "hidden":

            case 'overflow':
                if (!in_array($val, array('visible', 'hidden'))) {
                    $val = 'visible';
                }
                $this->value['overflow'] = $val;
                break;

So I tried following test case:

<?php
require __DIR__.'/vendor/autoload.php';
use Spipu\Html2Pdf\Html2Pdf;

$html = <<<EOT
<body>
    <style>
        .red {
            color:red;
            width:30px;max-width:30px;
            overflow:hidden;
        }
        .blue {
            color:blue;
        }
    </style>
    <table>
        <tr>
            <td class="red" >totototototototototototototototo</td>
            <td class="blue">titi</td>
        </tr>
    </table>
</body>
</html>
EOT;

$toPdf=false;

if($toPdf) {
    $html2pdf = new Html2Pdf();
    $html2pdf->writeHTML($html);
    $html2pdf->output();
}
else { echo $html; }

I'd like the expected output, as rendered in an html browser.
But html2pdf's output simply ignores the css overflow directive (see captures).
Is there something I'm doing wrong?
Is there a way at all?
I'd like a CSS solution/turnaround if possible, no solution based on a substring truncation (because such solutions will have disastrous results with strings like "WWWMMWMWWM" vs "iiilliilli" for instance, 10 characters each, quite a different width).

I'd be grateful to any solution or any hint towards a solution.
Thanks in advance.

Here under the html output in a browser, and the PDF output made by html2pdf.

Captures

Solution

  • overflow:hidden finally seems to work with DIV elements.
    But neither display:inline-blocknor float:left do, which would allow side by side DIVs...

    A few more tests, and I found my turnaround: a DIV with overflow:hidden in each TD...