Question

我使用pd4ml jar从html生成了pdf。显示的图像是结果pdf，其中td中的文本彼此重叠。代码如下


    <table>
        <tr>
           <td class="reportHeading" align="middle"><b>$title</b></td>
           <td class="reportLogo"><img height="${logoHeight}" src='$logo'></img></td>
        </tr>
    </table>

并且CSS是

    .reportHeading {
        font-size: 15pt;
        text-align:left;
        height:auto;
        vertical-align: middle;
    }
    .reportLogo {
        text-align:right;
        padding-right:2px; 
        padding-left:2px; 
        padding-top:2px;
        padding-bottom:2px;
    }

我不想添加 overflow：hidden ，因为它会隐藏文本。我想完全显示文字和徽标。

Answer 1

让它变得甜美而简单。只需在 CSS 下面添加即可。谢谢

.reportHeading b {
   line-height: 15px;
}

Answer 2

您可以拥有"overflow-x : scroll"。但是，如果内容溢出，您将获得一个水平滚动条

Answer 3

您可以在div中使用此style="overflow-x:auto; overflow-y:auto;"代码

<div style="overflow-x:auto; overflow-y:auto;">
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve <br> Eve
      </td>
      <td>Jackson</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnsonkkkkkkkkkkkkkkkkk</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

Answer 4

尝试在td中使用两个div 每个div都有一行尝试为文本内容div元素添加填充零

尝试一下，然后像上面一样张贴结果图像如果您可以发布一个简单的工作代码，它将有所帮助

请参见inline-block sample

Answer 5

将行高应用于您的班级“ reportHeading”文本。

.reportHeading{
line-height: 25px;
}

如何避免td中的文字重叠？

5 个答案: