HTML indentatinon in table

Question

My HTML code looks like this:

<style type="text/css">
<!--
    td.indent    {text-indent:10mm; }
//-->
</style>

[...]

<table>
    <tr>
        <td class="indent"> Long line of text </td>
        <td class="indent"> Some other text </td>
    </tr>
</table>

And the output text in the table is indented as expected:

              Long line of text

However, when I try to add line breaks with <br>:

<td class="indent"> Long line of<br> text </td>

Only the part before <br> is indented:

              Long line of
text

How can I get the output to look like this?

              Long line of
              text

Answer 1

You can use padding-left instead of text-indent.

td.indent {
  padding-left: 10mm;
}

<table>
  <tr>
    <td class="indent"> Long line of<br> text </td>
  </tr>
</table>