How do i avoid text overlapping in td?

Question

I have genertaed a pdf from html using pd4ml jar. The image shown is the resultant pdf that has text in td overlapping each other. the code is as follows

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

and the css is

    .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;
    }

I don't want to add overflow:hidden as it will hide the text. I want to show the text completely along with the logo.

Answer 1

Make it sweet and simple. Just add below CSS. Thanks

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

Answer 2

You can have "overflow-x : scroll". But you will get a horizontal scroll bar, if the content is overflowing

Answer 3

You can this style="overflow-x:auto; overflow-y:auto;"code in div

<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

Try with two div inside the td Each div had in line block Try to add padding zero for text content div element

Try it and post the result image as you did above If you can post a simple working code, it would help

See inline-block sample

Answer 5

apply Line height to your class "reportHeading" text.

.reportHeading{
line-height: 25px;
}