Angular/HTML：如何在表格单元格文本溢出省略号后添加按钮？

核心问题分析 #

你当前的代码里，<td> 设置了 overflow: hidden 和 text-overflow: ellipsis，但文本和按钮是默认流式排列的——文本过长时会把按钮挤到单元格可视区域之外，被 overflow:hidden 截断，所以按钮无法显示。

方案一：Flex 布局实现（推荐） #

通过将文本和按钮拆分到独立容器，用 flex 布局让文本占满剩余空间并处理溢出，按钮固定在右侧：

HTML 调整

<td #elCol class="ellipsis-cell">
  <span class="cell-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </span>
  <button *ngIf="overflows(elCol)">click me</button>
</td>

SCSS 样式

.ellipsis-cell {
  max-width: 20rem;
  display: flex;
  align-items: center;
  gap: 0.4rem; /* 按钮与文本的间距 */
}

.cell-text {
  flex: 1; /* 占满单元格剩余空间 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

方案二：绝对定位实现 #

如果需要保持文本的默认流式布局，可通过绝对定位把按钮固定在单元格右侧，同时给文本预留空间：

HTML 调整

<td #elCol class="ellipsis-cell">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  <button *ngIf="overflows(elCol)">click me</button>
</td>

SCSS 样式

.ellipsis-cell {
  max-width: 20rem;
  position: relative;
  padding-right: 4rem; /* 给按钮预留足够宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsis-cell button {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  white-space: nowrap; /* 避免按钮文本换行 */
}

补充说明 #

你的 overflows(elCol) 函数可以正常判断溢出状态，保持原有逻辑即可。两种方案都能确保按钮在单元格可视区域内显示，不会被文本遮挡或截断。

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