Golang中使用wkhtmltopdf生成PDF时页面右侧文字被截断的问题求助

从截图里能看到，右侧的年份本来是2013，但生成PDF后只显示了“20”，后面的“13”被截断了。我已经尝试过给元素增加margin和padding，但都没解决这个问题，想问问有没有CSS或者wkhtmltopdf本身的配置能解决这个问题？

以下是我的HTML模板代码片段：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Title</title>
        <style>
        @font-face {
            font-family: "Roboto";
            src: url("{{.Font}}") format("truetype");
            font-weight: normal;
            font-style: normal;
        }

        * {
            font-family: "Roboto", sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        a {
            color: #1763c0;
            text-decoration: none;
        }

        span {
            font-family: "Roboto", sans-serif;
        }

        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        img {
            height: 1.5rem;
            width: 1.5rem;
        }

        main {
            background: white;
            padding: 16px;
            margin: auto 16px;
        }

        .companyName {
            font-family: "Open Sans";
            font-style: normal;
            font-weight: 400;
            font-size: 36px;
            line-height: 49px;
            text-align: center;
            margin-top: 100px;
        }

        .img-responsive {
            height: 6rem;
            width: 6rem;
        }

        .img-signature {
            width: 6rem;
            height: 3rem;
        }

        footer {
            margin: 20px auto;
        }

        p {
            text-align: justify;
            font-size: 18px;
        }

        .witness {
            width: 50%;
            margin-left: 50px;
        }

        .witness-signature {
            margin-top: 10px;
            margin-left: 150px;
        }
    </style>
    </head>

    <body>
        <main>
            <div style="float: left">
                <img class="img-responsive" src="{{.Logo}}" />
            </div>
            <h1 class="companyName">Agreement</h1>

            <div class="content" style="padding: 40px 0; margin-top: 40px">
                <section class="section-1">
                    <p>This Agreement is made at Location, on this day ____ of
                        __________________, ______</p>
                    <br />
                    <p style="text-align:center;">BETWEEN</p>
                    <br />
                    <p>
                        M/s. {{.OrganisationName}}

                        <!-- COMPANY -->
                        {{if eq .OrgType "COMPANY"}}
                        (CIN:{{.CIN}}), a company registered under the Companies Act, {{.Year}},

可能的解决方案： #

• 调整容器宽度与文本换行规则
  你的main容器只设置了左右margin为16px，但没有明确宽度，可能导致内容超出PDF页面的可打印区域。可以给main添加计算后的宽度，同时开启自动换行：

  main {
    background: white;
    padding: 16px;
    margin: auto 16px;
    width: calc(100% - 32px); /* 减去左右margin的总和，确保不超出页面边界 */
    overflow-wrap: break-word; /* 让过长的内容自动换行，避免被截断 */
  }
  

• 配置wkhtmltopdf的页面边距与尺寸
  很多时候PDF截断问题是因为wkhtmltopdf默认的页面边距或尺寸不合适。如果是用命令行调用，可以添加这些参数：

  wkhtmltopdf --page-size A4 --margin-left 15mm --margin-right 15mm --margin-top 10mm --margin-bottom 10mm input.html output.pdf
  

  如果是在Golang代码里使用go-wkhtmltopdf库，可以这样设置：

  pdfGenerator, err := wkhtmltopdf.NewPDFGenerator()
  if err != nil {
      // 处理错误
  }
  // 设置页面尺寸为A4
  pdfGenerator.PageSize.Set(wkhtmltopdf.PageSizeA4)
  // 设置各边边距（单位：mm）
  pdfGenerator.MarginLeft.Set(15)
  pdfGenerator.MarginRight.Set(15)
  pdfGenerator.MarginTop.Set(10)
  pdfGenerator.MarginBottom.Set(10)
  // 后续添加页面、生成PDF的逻辑...
  

• 修复浮动元素的布局影响
  页面里的logo用了float: left，可能导致后续内容被挤压。可以给包含logo和标题的区域添加清除浮动的处理，比如给父容器加overflow: hidden：

  .header-wrapper { /* 把logo和companyName放到这个容器里 */
    overflow: hidden;
    margin-bottom: 20px;
  }
  

  对应的HTML结构调整：

  <div class="header-wrapper">
      <div style="float: left">
          <img class="img-responsive" src="{{.Logo}}" />
      </div>
      <h1 class="companyName">Agreement</h1>
  </div>
  

• 检查字体渲染问题
  自定义字体在wkhtmltopdf中可能存在宽度计算偏差，可以尝试给年份所在的文本添加字体相关的重置样式：

  p {
      text-align: justify;
      font-size: 18px;
      font-variant-ligatures: none; /* 禁用连字，避免字体宽度异常 */
      white-space: normal; /* 确保文本正常换行 */
  }
  

备注：内容来源于stack exchange，提问作者Kaushal