我有一个包含很长文本且没有空格的表格(用户喜欢发布包含所有参数的完整网站 URL)
然后我开始word-break:break-all;
and word-wrap:break-word;
在各个<td>
希望文本能放在桌子上。
我也设置了所有<td>
/ 列宽到某个指定的量。
我在这里使用 Laravel 的 DomPDF 包装器:https://github.com/barryvdh/laravel-dompdf https://github.com/barryvdh/laravel-dompdf
Case 1: No 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 结果:自动换行不起作用,列宽适用于文本较少的单元格,但不适用于具有长文本的单元格(需要自动换行)。
Case 2: Adding 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 生成器?
EDIT:
我还发现了很多关于此的 Github Issues,但没有迹象表明该错误已被修复
- 如果内容超出指定尺寸,则不考虑表格单元格宽度 #1017 https://github.com/dompdf/dompdf/issues/1017
- 表格宽度不符合 css 宽度属性。第1253章 https://github.com/dompdf/dompdf/issues/1253
- 修复了表格布局忽略列宽的问题 #1432 https://github.com/dompdf/dompdf/issues/1432