Laravel Snappy PDF旋转文本nowrap属性失效问题求助

问题背景 #

使用Laravel Snappy PDF生成PDF时，旋转文本的text-wrap: nowrap属性无法生效，文本仍然换行，需求是让每个科目代码以单行显示并消除多余空格。

问题分析 #

1. 循环中重复使用同一个id（rotatetext），违反HTML规范，导致样式无法正确应用到所有元素。
2. text-wrap: nowrap是较新CSS属性，Snappy依赖的wkhtmltopdf对其支持有限，更兼容的单行控制属性为white-space: nowrap。
3. 旋转元素的容器布局未适配，空间不足引发文本换行。

解决方案 #

1. 修改CSS样式

将重复的id改为class，添加兼容的单行控制属性，同时调整旋转布局设置：

<style>
.rotatetext {
    display: inline-block; /* 确保容器包裹文本 */
    white-space: nowrap; /* 强制文本单行显示 */
    text-align: center;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    transform-origin: center center; /* 修正旋转原点，避免位置偏移 */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    vertical-align: middle;
    /* 可选：根据文本长度设置固定高度，容纳旋转后的内容 */
    height: 120px;
}
</style>

2. 修改Blade模板

替换重复的id为class，移除无效行内样式，统一通过CSS控制：

@foreach ($subj_list as $subj_code)
    <th class="rotatetext" style="text-align: center;">Q{{ $q_key }} {{ $subj_code }}</th>
@endforeach

额外优化建议 #

• 若文本长度差异大，可使用min-height替代固定高度，或动态计算容器高度。
• 若仍有多余空格，可添加font-kerning: none或letter-spacing: 0来消除间距。

内容的提问来源于stack exchange，提问作者Jericho Cosico