HTML表格单元格内两行文本间右侧添加文本的布局问题

针对你在表格单元格内的布局需求，这里有两个可行的实现方案，都能避免硬空格，精准控制附加文本的位置：

方案1：相对+绝对定位（兼容旧浏览器） #

这种方式适合需要兼容低版本浏览器的场景，通过定位把附加文本固定在单元格右侧垂直居中位置：

HTML结构 #

<td class="position-cell">
  <span class="main-text">
    第一行文本<br>第二行文本
  </span>
  <span class="extra-text">附加文本</span>
</td>

CSS样式 #

.position-cell {
  position: relative;
  /* 给右侧的附加文本预留足够空间，根据实际内容调整宽度 */
  padding-right: 70px;
}

.extra-text {
  position: absolute;
  top: 50%;
  right: 0;
  /* 让文本垂直居中，抵消自身一半的高度 */
  transform: translateY(-50%);
}

方案2：Flex布局（现代浏览器首选） #

用Flex布局更直观，结构也更清晰，不需要依赖定位，直接通过弹性盒的对齐属性实现需求，同时可以抛弃<br>标签，用更语义化的结构拆分两行文本：

HTML结构 #

<td>
  <div class="flex-wrap">
    <div class="main-content">
      第一行文本
      <div>第二行文本</div>
    </div>
    <div class="extra-content">附加文本</div>
  </div>
</td>

CSS样式 #

.flex-wrap {
  display: flex;
  /* 让附加文本和主文本垂直居中对齐 */
  align-items: center;
  /* 主文本和附加文本之间的间距，可按需调整 */
  gap: 15px;
}

.main-content {
  display: flex;
  flex-direction: column;
}

为什么之前的对齐设置没用？ #

你之前尝试的文本对齐（比如text-align）只能控制文本块本身的对齐，没法把独立的附加文本插入到两行文本的中间右侧位置。核心思路是把主文本和附加文本拆分成两个独立的元素，再通过布局属性控制它们的相对位置，这样就能实现你要的效果。

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