如何不使用<br>标签实现表格单元格内<a>标签换行？

要实现<td>标签内每个<a>自动换行，且效果和手动添加<br>完全一致，用CSS就能搞定：

解决方案代码 #

<!-- 引入本地Bootstrap样式文件 -->
<link rel="stylesheet" href="bootstrap.min.css" />
<style>
  table > tbody > tr > td > a {
    display: block;
  }
</style>
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Link</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.</td>
      <td>
        <a>Link 1</a>
        <a>Link 2</a>
      </td>
    </tr>
    <tr>
      <td>2.</td>
      <td>
        <a>Link 1</a>
        <br>
        <a>Link 2</a>
      </td>
    </tr>
  </tbody>
</table>

核心原理 #

<a>默认是行内元素，多个行内元素会并排显示。给它设置display: block后，每个链接会独占一行，自动实现换行，和用<br>的视觉效果完全一致。

如果需要调整链接之间的垂直间距，还可以添加margin-bottom属性：

table > tbody > tr > td > a {
  display: block;
  margin-bottom: 0.5rem; /* 按需调整间距大小 */
}

内容的提问来源于stack exchange，提问作者RuchDi