HTML/css text in table cell not indenting

Question

A simple question but large impact on appearance.

I want text indented from cell border and have tried style=text-indent: 4px (not formatted so it displays properly here) but while the first line is indented, the lines after the <br> tags are not indenting. Please help. I need to use div because of some Javascript. Here is flawed code:

<td>
   <div id="navbar" style="text-indent:4px"><b>View by:</b><br>
      <a href="search.php?cat=pop">Popular</a><br>
      <a href="search.php?cat=trend">Trending</a><br>
   </div>
</td>

Answer 1

text-indent is only supposed to touch the first line. Use margin (or margin-left or padding or etc) if you want to adjust the entire block.

Answer 2

尝试向元素添加填充，该元素包含您要缩进的文本。

   <td style="padding:5px;">text</td>

Answer 3

当无法缩进时，我通过添加下面的样式来解决它。

overflow-wrap: break-word;