时间戳

首页 > 解决方案 > 使用 CSS 修复 mpdf 中 sup 标签上方的额外间距

mpdf - 使用 CSS 修复 mpdf 中 sup 标签上方的额外间距

问题描述

是否可以在 mpdf 中调整行高、填充或边距？我尝试将下面的代码应用于 mpdf 的 css 文件，但没有任何属性生效，甚至没有背景颜色。

sup{
  line-height: .6em;
    top: -10px; 
    font-size: 0.63em;
    vertical-align: super;   
    padding-bottom: 20px;
    margin-bottom: 10px;
    border-bottom: solid 1px #000000;
    display: inline-block;
    background: yellow;
}
<p>Phasellus nec lectus in risus consequat hendrerit non eu elit. Fusce imperdiet, ante sed maximus 6<sup>th</sup>, nulla augue ultrices nibh, vel ornare ligula dolor sed est.<p>

前端截图

mpdf pdf输出

标签： mpdf

解决方案

根据文档，有一些方法可以实现这一点。选择其中之一，让魔法发生。

CSS 样式表 - 包含在 HTML 文档的标题中或作为 @import()
css-stylesheets

  1. html标签例如p { font-size:12pt; color:#880000; }
  2. 类例如.stylename { font-size:9pt; }
  3. 身份证例如#style { font-size:9pt; }
  4. 内联 CSS 样式，例如 <p style="font-family:monospace;">

以及我更喜欢使用的方式。

使用样式表文件。

WriteHTML() 方法采用第二个参数，即$mode。有关此参数和其他参数的详细信息，请参阅 WriteHTML()。

使用样式表的示例

<?php

$stylesheet = file_get_contents('style.css');

$mpdf->WriteHTML($stylesheet,\Mpdf\HTMLParserMode::HEADER_CSS);
$mpdf->WriteHTML($html,\Mpdf\HTMLParserMode::HTML_BODY);

否则请阅读本文。它也可以帮助你。 仅在 CSS 中的上标

推荐阅读