DomPDF 表格固定列宽和打断长文本

Question

我有一个没有空格的非常长的文本表（用户喜欢发布包含所有参数的完整网站 URL）

然后我设置了 word-break:break-all; 和 word-wrap:break-word; 每个 <td> 希望文本可以放在桌子上。

我还将所有 <td> / 列宽设置为某个指定的数量。

我在这里使用 Laravel 的 DomPDF 包装器： https ://github.com/barryvdh/laravel-dompdf

---

情况 1： 否 table-layout: fixed

 <table class="bordered">
    <tr class="font-12">
        <th style="width: 25px">No</th>
        <th style="width: 100px">Nama Alat</th>
        <th style="width: 25px">Jml</th>
        <th style="width: 300px">Spesifikasi</th>
        <th style="width: 300px">Supplier</th>
        <th style="width: 150px">Gambar</th>
    </tr>
    @foreach ($items as $index => $item)
    <tr>
        <td style="width: 25px">{{ ($index+1) }}</td>
        <td style="width: 100px">{{ $item['name'] }}</td>
        <td style="width: 25px">{{ $item['jumlah_disetujui'] }}</td>
        <td class="font-12" style="width: 300px; word-break:break-all; word-wrap:break-word;">
            {!! nl2br( $item['spesifikasi'] ) !!}
        </td>
        <td class="font-12" style="width: 300px; word-break:break-all; word-wrap:break-word;">
            {!! nl2br( $item['supplier'] ) !!}
        </td>
        <td style="width: 150px">
            @if ($item['image'])
                <img style="max-height: 125px;" src="{{ $item['image'] }}" />
            @else
                -
            @endif
        </td>
    </tr>
    @endforeach
</table>

案例 1 PDF 结果： 自动换行不起作用，列宽适用于文本很少的单元格，但对文本较长的单元格（需要自动换行）不起作用。

---

案例 2： 添加 table-layout: fixed

 <table class="bordered" style="table-layout: fixed"> <!-- only added this -->
    <tr class="font-12">
        <th style="width: 25px">No</th>
        <th style="width: 100px">Nama Alat</th>
        <th style="width: 25px">Jml</th>
        <th style="width: 300px">Spesifikasi</th>
        <th style="width: 300px">Supplier</th>
        <th style="width: 150px">Gambar</th>
    </tr>
    @foreach ($items as $index => $item)
    <tr>
        <td style="width: 25px">{{ ($index+1) }}</td>
        <td style="width: 100px">{{ $item['name'] }}</td>
        <td style="width: 25px">{{ $item['jumlah_disetujui'] }}</td>
        <td class="font-12" style="width: 300px; word-break:break-all; word-wrap:break-word;">
            {!! nl2br( $item['spesifikasi'] ) !!}
        </td>
        <td class="font-12" style="width: 300px; word-break:break-all; word-wrap:break-word;">
            {!! nl2br( $item['supplier'] ) !!}
        </td>
        <td style="width: 150px">
            @if ($item['image'])
                <img style="max-height: 125px;" src="{{ $item['image'] }}" />
            @else
                -
            @endif
        </td>
    </tr>
    @endforeach
</table>

案例 2 PDF 结果： 自动换行有效，但列宽无效

---

我想要的是：一个具有固定宽度列的表格，该表格具有有效的自动换行

这在 DomPDF 上是不可能的吗？

任何可以帮助实现这一目标的解决方法或“黑客”？

或者我应该开始寻找其他/更好的 PDF 生成器？

编辑：

我也发现了很多关于这个的 Github Issues，没有修复 bug 的迹象

• 如果内容超过指定的尺寸，表格单元格宽度将不被接受 #1017
• 表格宽度不符合 css 宽度属性。 #1253
• 固定表格布局忽略列宽 #1432

原文由 topher 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不是真正的“答案”，但我的解决方案是切换到 Snappy PDF （使用 Laravel Package ）。

工作得很好，我什至没有更改 HTML 标记。

原文由 topher 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我用 table-layout:fixed 以 % 设置宽度，它工作正常

原文由 Solonka 发布，翻译遵循 CC BY-SA 4.0 许可协议